反向重用 CSS 动画(通过重置状态?) [英] Reuse CSS animation in reversed direction (by resetting the state?)

问题描述

我在 CSS 中使用了两个关键帧动画.一个从左向右移动，另一个使用完全相同的值 - 但相反.

@keyframes moveLeft{来自 {transform: translate3d(50px, 0, 0);}到 {转换:translate3d(0px, 0, 0);}}@keyframes 向右移动{来自 {transform: translate3d(0px, 0, 0);}{转换:translate3d(50px, 0, 0);}}

但是，我想知道是否可以只使用一个关键帧动画.但是一旦我添加 animation-direction: reverse，动画只会播放一次.它可能会保存以前使用过一次的信息.所以:我可以以某种方式重置这些信息吗?或者有没有可能在不同的方向上两次使用一个动画?(不使用JS)

http://jsfiddle.net/vrhfd66x/

解决方案

不，没有办法单独使用 CSS 重新启动动画.您必须使用 JavaScript 从元素中删除动画，然后将其重新应用于元素(延迟后)以使其重新启动.

以下是 W3C 的 CSS3 动画规范 说(在不同的上下文中，但这一点也适用于这种情况):

<块引用>

另请注意，更改 'animation-name' 的值不一定会重新启动动画(例如，如果应用了动画列表并从列表中删除了一个，则只有该动画会停止；其他动画将继续).要重新启动动画，必须将其删除然后重新应用.

^{重点是我的}

Chris Coiyer 的 CSS 技巧文章表示相同，并提供了一些重新启动动画的 JS 解决方案.(注意:该文章引用了 Oli 的 dabblet，其中声称更改持续时间、迭代次数等属性使其在 Webkit 上重新启动，但它似乎已经过时，因为它们不再适用于 Chrome).><小时>

总结:

虽然您已经触及以下内容，但为了完整起见，我将再次重申:

• 在元素上应用动画后，它会一直保留在元素上，直到被移除为止.
• UA 会跟踪元素上的动画以及它是否已完成.
• 当你在 :checked 上应用相同的动画时(尽管方向不同)，UA 什么都不做，因为动画已经存在于元素上.
• 点击复选框时位置的切换(瞬时)是因为在 :checked 选择器中应用了 transform.动画的存在没有任何区别.

<小时>

解决方案:

从下面的代码片段可以看出，即使使用 JavaScript，通过单个动画实现这一点也非常复杂.

var input = document.getElementsByClassName("my-checkbox")[0];input.addEventListener('click', function() {如果(this.checked){this.classList.remove('my-checkbox');window.setTimeout(function() {input.classList.add('anim');input.classList.add('checked');}, 10);} 别的 {this.classList.remove('anim');window.setTimeout(function() {input.classList.remove('checked');input.classList.add('my-checkbox');}, 10);}});

input {变换:translate3d(50px, 0, 0);}.my-checkbox {动画:moveLeft 1s；动画方向:反向；}.checked {变换:translate3d(0px, 0, 0);}.anim{动画:moveLeft 1s；}@keyframes moveLeft {从 {变换:translate3d(50px, 0, 0);}到 {变换:translate3d(0px, 0, 0);}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><input type="checkbox" class="my-checkbox">

因此，最佳选择(如果您想坚持使用 CSS 动画)是使用两种不同的动画.

或者，您也可以查看 Marcelo 的评论.如果实际用例正是 fiddle 中提供的用例，那么 transition 就足够了，并且不需要 animation.转换本质上可以正向和反向工作，因此是一个更安全的选择.

I've used two keyframe animations in CSS. One moves from left to right and the other one uses exact the same values - but reversed.

@keyframes moveLeft
{
    from {transform: translate3d(50px, 0, 0);}
    to   {transform: translate3d(0px, 0, 0);}
}


@keyframes moveRight
{
    from {transform: translate3d(0px, 0, 0);}
    to   {transform: translate3d(50px, 0, 0);}
}

However, I wonder whether it's possible to use one keyframe animation only. but as soon as I add animation-direction: reverse, the animation does only play once. It probably saves the information that it has been used once before. So: can I reset this information somehow? Or is there any possibility to use one animation twice in different directions? (without using JS)

http://jsfiddle.net/vrhfd66x/

解决方案

No, there is no way to restart the animation using CSS alone. You'd have to use JavaScript to remove the animation from the element and then re-apply it to the element (after a delay) for it to restart.

The below is what the W3C's CSS3 Animation Spec says (in a different context, but the point should hold good for this case also):

Note also that changing the value of ‘animation-name’ does not necessarily restart an animation (e.g., if a list of animations are applied and one is removed from the list, only that animation will stop; The other animations will continue). In order to restart an animation, it must be removed then reapplied.

^{emphasis is mine}

This CSS Tricks Article by Chris Coiyer also indicates the same and provides some JS solutions for restarting an animation. (Note: The article has a reference to Oli's dabblet which claims that altering properties like duration, iteration count makes it restart on Webkit but it seems to be outdated as they no longer work on Chrome).

---

Summary:

While you have already touched upon the following, I am going to re-iterate for completeness sake:

• Once an animation is applied on the element, it remains on the element until it is removed.
• UA does keep track of the animation being on the element and whether it has completed or not.
• When you apply the same animation on :checked (albeit with a different direction), the UA does nothing because the animation already exists on the element.
• The switch of positions (instantaneous) while clicking the checkbox is because of the transform that is applied within the :checked selector. The animation's presence makes no difference.

---

Solutions:

As you can see from the below snippet, achieving this with a single animation is pretty complex even when using JavaScript.

var input = document.getElementsByClassName("my-checkbox")[0];

input.addEventListener('click', function() {
  if (this.checked) {
    this.classList.remove('my-checkbox');
    window.setTimeout(function() {
      input.classList.add('anim');
      input.classList.add('checked');
    }, 10);
  } else {
    this.classList.remove('anim');
    window.setTimeout(function() {
      input.classList.remove('checked');
      input.classList.add('my-checkbox');
    }, 10);
  }
});

input {
  transform: translate3d(50px, 0, 0);
}
.my-checkbox {
  animation: moveLeft 1s;
  animation-direction: reverse;
}
.checked {
  transform: translate3d(0px, 0, 0);
}
.anim{
  animation: moveLeft 1s;
}
@keyframes moveLeft {
  from {
    transform: translate3d(50px, 0, 0);
  }
  to {
    transform: translate3d(0px, 0, 0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="checkbox" class="my-checkbox">

So, the best option (if you want to stick to CSS animations) is to use two different animations.

Alternately, you could also have a look at Marcelo's comment. If the actual use-case is exactly what is provided in the fiddle then transition would suffice and animation isn't required. Transitions can work both in forward and reverse directions by nature and hence would be a safer bet.

这篇关于反向重用 CSS 动画(通过重置状态?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！