动画和转换的组合无法正常工作 [英] Combination of animation and transition not working properly

问题描述

我一直在试图放一些基本的CSS3动画。目标是在按钮的点击事件上切换类，并基于添加的类对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;过渡定时函数：线性;位置：相对; top：0; left：0;}。clicked {animation-name：clicked; animation-duration：1s;动画定时功能：线性; animation-fill-mode：forward;} @ 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>点击我！< / button>< div> ;< / div>  

a href =http://jsfiddle.net/tanvir442/q5me2w4b/ =nofollow>此处。

解决方案

这是Chrome的一种已知行为。 Firefox似乎能够通过转换平滑地处理动画的移除，但Chrome不会这样做。我已经看到这种行为发生在较早的这个线程。

为什么在Chrome中转换时动画的删除不起作用？

虽然我无法提供100％愚蠢的解释，为什么会发生这种情况，我们可以解码它在一定程度上基于此HTML5Rocks文章关于Chrome中的加速渲染和这一个关于GPU加速合成在Chrome 。

似乎发生的是，元素有自己的渲染层，因为它有明确的位置属性设置。当一个图层（或其中的一部分）由于动画而失效时，Chrome仅重新绘制受更改影响的图层。当您打开Chrome开发者控制台时，打开显示绘制矩形选项，您会看到，当动画发生时，Chrome仅绘制动画的实际元素。

然而，在动画的开始和结束，整个页面重绘正在发生，这使元素立即回到其原始位置，从而重写过渡行为。

  $（'button'）click（function（）{$（'div'）。toggleClass（'clicked'）;}）;  

  div {background-color：#ccc; height：100px; width：100px; transition-property：top，left; transition-duration：1s;过渡定时函数：线性;位置：相对; top：0; left：0;}。clicked {animation-name：clicked; animation-duration：1s;动画定时功能：线性; animation-fill-mode：forward;} @ 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>点击我！< / 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;过渡定时函数：线性;位置：相对; 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>点击我！< button>< div>< / div>  

I have been trying to put some basic CSS3 animation. The objective is to toggle a class on the click event of a button and animate a div based on the added class. The code works perfectly for the first iteration of toggle in Firefox but for other browsers like Chrome and for the next iteration in Firefox the transformation is toggled in a blink of an eye. Please help me to figure out what's going wrong.

Snippet:

$('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>

I have also prepared a fiddle here.

解决方案

This is sort of a known behavior with Chrome. Firefox does seem to be able to handle the removal of animation smoothly with transition but Chrome doesn't do so. I had seen this behavior happen earlier also in this thread.

Why does removal of an animation not work with transition in Chrome?

While I cannot provide a 100% fool-proof explanation of why this happens, we can decode it to some extent based on this HTML5Rocks article about Accelerated rendering in Chrome and this one about GPU accelerated compositing in Chrome.

What seems to happen is that the element gets its own rendering layer because it has explicit position property set on it. When a layer (or part of it) gets invalidated due to animation, Chrome only repaints that layer which is affected by the change. When you open the Chrome Developer Console, switch on "Show Paint Rects" option, you would see that when the animation is happening Chrome only paints the actual element that is getting animated.

However, at the start and end of animation a whole page repaint is happening which puts the element back into its original position immediately and thus overriding the transition behavior.

$('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>

---

What is the solution?

Since your movement is actually a linear movement from one position to another, you can achieve it without the need for any animation. All that we need to do is use a translate transform and shift the element by the required no. of pixels when the class is toggled on. Since there is a transition assigned to the element via another selector, shifting would happen in a linear way. While class is toggled off, the element moves back to its original position again in a linear way due to transition on the element.

$('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>

这篇关于动画和转换的组合无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！