悬停元素时适当淡入/淡出图像的方法

Question

我正在使用animeJS动画库（www.animejs.com）进行一些测试，当用户将鼠标移动到页面中的某些div元素时，我想用它来更改另一个图像。另外，我想用漂亮的淡出/淡入效果交换图像。你可以在这个小提琴中看到一个例子：https://jsfiddle.net/n5c5rgjo/3/

如果您尝试它，您将看到它正常工作，直到您在播放动画时将鼠标从一个div移动到另一个div。为避免在这种情况下出现闪烁效应，我在代码中添加了一个“锁定”（animLock变量），一次只允许一个动画。这会产生另一个问题，因为图像没有正确更新。

有人能告诉我一个更好的方法来解决这个问题吗？谢谢！

Answer 1

广告此CSS

img{
  transition: all 0.8s;
}
img:hover{
  opacity:0.1;
 transition: all 0.8s;
}