javascript - 在淡入淡出之间淡入/淡出

Question

所以事情就是这样。我看到这个网站:http://laneandassociates.co/english-mustard-scottish-oats我完全不明白他们是如何做到淡入淡出的。

其淡入淡出效果的伟大之处在于，可以通过单击在淡入淡出过程中“停止”它。

为了更好地理解:让我们假设 fadeIn 持续时间为 1000。如果我在 fadeIn 处于(例如)700 时单击，fadeIn 会立即停止在 700 处并开始淡出回 0。然后下一张图像从 0 开始。它看起来非常平滑。

问题是，我什至找不到淡入淡出的代码。有人可以告诉我他们是如何制作的，这样我就可以看一下并学习它吗？

提前谢谢您。

Answer 1

该网站正在使用 cubic-bezier CSS 动画。

这是通过一些 CSS 实现的，如下所示:

.element.animated {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),visibility 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    visibility: hidden;
}

困难的部分可能是计算您想要的动画类型的正确参数。您可以使用this site to do that .

这是一个demo of another animation .

<小时/>

删除悬停动画:

.element.animated:hover {
    opacity: 1;
    transition: none;
}