我一直试图把一些基本的
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;
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>
我还准备了一个小提琴here.
解决方法
这是Chrome的一种已知行为. Firefox似乎能够通过转换顺利处理动画的删除,但Chrome不会这样做.我曾经看到过这种行为也发生在
this thread之前.
为什么删除动画无法在Chrome中进行转换？
虽然我无法提供100％万无一失的解释,为什么会发生这种情况,我们可以根据this HTML5Rocks article about Accelerated rendering in Chrome和this one about GPU accelerated compositing in 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;
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>
