在javascript中如何使元素在mouseout事件后重置其位置

正在尝试制作如下按钮：。现在代码的问题是，它在第一次使用时就按照预期工作；但在那之后，它不是按照预期从左到右，而是从右到左到右

HTML

---

我建议您使用.on事件侦听器

$('').on("mouseentre","elem",function(){$('').toggleclass('.classname')})
$('').on("mouseleave","elem",function(){$('').toggleclass('.classname')})

然后可以将css类切换到函数中的元素

toggle类将类的css添加到您的jquery选择中，您可以多次这样做，并在css类中具有动画的关键帧

---

关键帧是实现动画的好方法，每个浏览器都支持关键帧，除非必须用JavaScript计算值（如元素的高度）。 使用CSS类作为修改器（隐藏、折叠、折叠等）。 使用JavaScript时，仅添加/删除/切换类

yourElement.addEventListener(
    "mouseenter",
    function (event)
    {
        yourElement.classList.remove("is-collapsed");
    }
);
yourElement.addEventListener(
    "mouseleave",
    function (event)
    {
        yourElement.classList.add("is-collapsed");
    }
);

---

is collapsed只是一个示例，请根据您的类命名标准对其命名。

您可能需要比所显示的代码多一点的代码，因为您需要做两件互斥的CSS事情：在mouseenter/mouseout上的“按钮”上转换背景，该按钮是动画的，然后将背景重置为其开始位置，该位置绝对不应设置动画。因此，您不仅需要切换背景，还需要切换是否为这些更改设置动画

函数设置动画（容器）{
const fg=container.querySelector（'.label'）；
const bg=container.querySelector（'.slide bg'）；
const stop=evt=>evt.stopPropagation（）；
//第一步：使标签文本不起作用。这很关键。
fg.加法器列表器（“鼠标指针”，停止）；
fg.加法器侦听器（“鼠标出”，停止）；
//鼠标输入：在动画中启动幻灯片
container.addEventListener（'mouseenter'，evt=>{
bg.classList.add（'animate'）；
bg.classList.add（'slide-in'）；
});
//鼠标移出：启动滑出动画
container.addEventListener（'mouseout'，evt=>{
bg.classList.remove（'slide-in'）；
bg.classList.add（'slide-out'）；
});
//滑出转换完成后，
//在关闭动画的情况下重置CSS_
bg.addEventListener（'transitionend'，evt=>{
if（bg.classList.contains（'slide-out'））{
bg.classList.remove（'animate'）；
bg.classList.remove（'slide-out'）；
}
});
}
设置动画（document.querySelector（'.slide'）
。幻灯片{
位置：相对位置；
溢出：隐藏；
宽度：12雷姆；
高度：1.25雷姆；
光标：指针；
边框：1px纯黑；
文本对齐：居中；
}
.滑跨{
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
}
.幻灯片背景{
背景色：rgba（0,0,0,1）；
转换：转换（-100%，0）；
过渡：无；
z指数：0；
}
.slide-bg.animate{
过渡：0.5s缓进缓出转换；
}
.slide-bg.slide-in{
转换：转换（0%，0）；
}
.slide-bg.slide-out{
转换：转换（100%，0）；
}

查看定价
这需要jQuery。。。OP使用纯JavaScript，这甚至不能真正解决问题。它只是一个建议，不应该是答案。答案应该可以解决问题。不幸的是，这个答案没有解释与问题相关的任何内容：当然，你完全可以在JS端使用带有动画的CSS类和一个
transitionend
，以确保事情不会反弹，但是你怎么做呢？事实上，这个答案并没有回答这个问题。
$('').on("mouseentre","elem",function(){$('').toggleclass('.classname')})
$('').on("mouseleave","elem",function(){$('').toggleclass('.classname')})

yourElement.addEventListener(
    "mouseenter",
    function (event)
    {
        yourElement.classList.remove("is-collapsed");
    }
);
yourElement.addEventListener(
    "mouseleave",
    function (event)
    {
        yourElement.classList.add("is-collapsed");
    }
);