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

Question

我一直在尝试放置一些基本的CSS3动画。目的是在按钮的click事件上切换类，并根据添加的类为div设置动画。该代码非常适合Firefox中的第一个切换迭代，但是对于Chrome等其他浏览器以及Firefox中的下一个迭代，只需瞬间即可切换。请帮助我找出问题所在。

片段：

$('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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button">Click Me!</button>

<div></div>

我也在这里准备了一个小提琴。

Answer 1

这是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>