我正在尝试对具有相同属性的 css 转换进行排队。基本上我想在我进行另一个翻译之前将一个元素翻译到某个位置(因此过渡持续时间为 0)。
这是一个模型,点击移动(盒子应该向右移动 100 像素,然后向左移动 100 像素)
- 这不起作用,因为第二个转换首先覆盖?
https://jsfiddle.net/aqwaypoh/3/
- 这行得通(我需要非零 (0.01) 的过渡持续时间,否则 transitionend 不会触发)。
https://jsfiddle.net/dpv3xzth/5/
还有一个问题是 transition end 在 chrome 上触发了 2 次,但我可以解决这个问题,我只是想知道有没有更好的方法来写这个?
如果可能的话,我更愿意在没有结束事件或计时器的情况下编写此代码?
<div class="box"></div>
<a href="#" class="move">move</a></a>
最佳答案
更新:
您可以将 CSS3 animation
属性与 @keyframes
一起使用。
.box.animate {
animation: move 2s;
}
@keyframes move {
0% {
transform: translate(100px);
}
100% {
transform: translate(0px);
}
}
要使方 block 移动,您可以将 animate
类添加到您的元素中。或者你可以在 javascript 中自己设置 animation
属性,这取决于你。
box.addClass('animate')
jsfiddle: https://jsfiddle.net/aqwaypoh/7/
关于javascript - Css3 过渡队列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40349325/