如何实现鼠标移入li标签时垃圾桶图标从左向右滑出的效果？

问题原因 #

• 你当前使用的jQuery show()/hide()方法本质是切换元素的display属性，该属性不支持CSS过渡动画，因此只会直接切换显示状态，没有滑动效果
• 你把垃圾桶的点击事件绑定放在了mouseenter回调中，每次鼠标悬停到li上都会重复绑定一次点击事件，后续触发删除时会执行多次逻辑，属于隐藏的逻辑bug

修复方案 #

优先使用CSS实现动画，性能更优、逻辑更简单，同时修正JS的事件绑定问题即可：

1. 样式部分修改

给垃圾桶span新增过渡属性，默认状态设为宽度为0、全透明、内容溢出隐藏，li悬停时恢复正常宽度和透明度：

.span-trash{
    width: 0; /* 默认宽度为0，实现向左收起效果 */
    height: 40px;
    display: inline-block;
    background-color: red;
    color: white;
    text-align: center;
    padding-top: 5px;
    overflow: hidden; /* 隐藏宽度为0时的垃圾桶图标 */
    opacity: 0; /* 默认全透明 */
    transition: all 0.3s ease; /* 所有属性变化添加0.3秒的平滑过渡 */
    margin-right: 8px; /* 和后续文本保留间距 */
}
/* li悬停时垃圾桶的激活样式 */
li:hover .span-trash {
    width: 40px;
    opacity: 1;
}

同时删除HTML中li标签内span上的style="display: none;"内联样式，现在用CSS控制状态无需该属性。

2. JS逻辑修改

删除mouseenter和mouseleave里的显示隐藏逻辑，同时把垃圾桶点击事件改成事件委托形式，避免重复绑定：

$(document).ready(function(){
    // 原有切换完成状态的逻辑保留
    $("ul").on("click", "li", function(){
        $(this).toggleClass("done");
    });
    // 垃圾桶删除事件用事件委托绑定，无需放到mouseenter回调中
    $("ul").on("click", ".span-trash", function(e) {
        e.stopPropagation(); // 阻止事件冒泡，避免点击垃圾桶时触发li的完成状态切换
        $(this).parent().remove();
    })
});

修改后即可实现鼠标悬停时垃圾桶图标从左到右平滑滑入，鼠标移出后平滑收起的效果，同时删除逻辑也不会出现重复触发的问题。

内容的提问来源于stack exchange，提问作者Coderash