动画和过渡的组合无法正常工作

动画和过渡的组合无法正常工作

这是Chrome的一种已知行为。Firefox似乎确实能够在过渡过程中顺利处理动画的删除，但Chrome却不能。发生。

为什么删除动画不能在Chrome中进行过渡？

尽管我无法提供100％的万无一失的解释，但我们可以根据有关HTML5Rocks中有关Chrome加速渲染的文章和[有关GPU中GPU加速合成的在某种程度上对其进行解码。

似乎发生的事情是，该元素获得了自己的呈现层，因为在其上设置了显式的position属性。当某个图层（或其一部分）由于动画而失效时，Chrome只会重新绘制受更改影响的图层。当您打开Chrome开发者控制台时，打开“显示油漆矩形”选项，您会看到在动画发生时Chrome仅绘制正在动画的实际元素。

但是，在动画的开始和结束时会发生整个页面的重新绘制，这将使元素立即回到其原始位置，从而覆盖过渡行为。

$('button').click(function(){  $('div').toggleClass('clicked');});div{  background-color: #ccc;  height: 100px;  width: 100px;  transition-property: top, left;  transition-duration: 1s;  transition-timing-function: linear;  position: relative;  top: 0;  left: 0;}.clicked{  animation-name: clicked;  animation-duration: 1s;  animation-timing-function: linear;  animation-fill-mode: forwards;}@keyframes clicked{  0% {top: 0; left: 0;}  100% {top: 100px; left: 100px;}}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button type="button">Click Me!</button><div></div>

---

解决办法是什么？

由于您的运动实际上是从一个位置到另一个位置的线性运动，因此无需任何动画就可以实现它。我们需要做的就是使用

translate

转换并将元素移位所需的no。类别开启时的像素数。由于存在通过另一个选择器分配给元素的过渡，因此移位将以线性方式发生。关闭类时，由于元素上的过渡，元素将再次以线性方式移回到其原始位置。

$('button').click(function() {  $('div').toggleClass('clicked');});div {  background-color: #ccc;  height: 100px;  width: 100px;  transition-property: transform;  transition-duration: 1s;  transition-timing-function: linear;  position: relative;  top: 0;  left: 0;}.clicked {  transform: translate(100px, 100px);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><button type="button">Click Me!</button><div></div>