如果选择器不再匹配，如何将 CSS3 动画运行到最后? [英] How to run the CSS3 animation to the end if the selector is not matching anymore?

问题描述

我一直认为 CSS3 动画(不同于 CSS3 过渡)一旦开始，总是完成工作，无论选择器是否不再匹配激活它们的元素.

I've always thought that CSS3 Animations (differently from CSS3 Transitions) once started, always finish the job, no matter if the selector is not matching anymore the element that activated them.

我今天意识到我可能错了.

I'm realizing today that I was probably wrong.

在以下示例中，动画由 :focus 和 :active 伪类触发.关注第一个文本字段:

In the following example, an animation is triggered by the :focus and :active pseudo-classes. Focus on the first textfield:

• 如果你慢慢按下tab按钮，你会看到动画正确开始和结束；
• 如果你快速按下tab按钮，你会看到一旦新元素获得焦点，旧元素的动画立即结束并消失.

• if you press the tab button slowly, you will see the animations starting and ending correctly;
• if you press the tab button quickly, you will see that once a new element get the focus, the old element's animation immediately ends and disappear.

@-webkit-keyframes pressed {    
    0%, 100% { transform : scale(1); }
         50% { transform : scale(2); }
}
@keyframes pressed {    
    0%, 100% { transform : scale(1); }
         50% { transform : scale(2); }
}
a:focus, a:active {
    -webkit-animation : pressed 2s; 
            animation : pressed 2s; 
}

a, input {
          border : 1px solid silver; 
         padding : 5px;
          height : 40px;
     line-height : 28px;
          margin : 0px;
         display : inline-block;
           width : 33.3%;
      box-sizing : border-box;  
      background : white; 
  vertical-align : middle;
}

a { 
           color : dodgerBlue; 
 text-decoration : none;}

input {
           color : red;
}

<input type="text" id="foo" value="Start here, then press tab" /><a  href = "#">
Lorem
</a><a  href = "#">
Ipsum
</a><a  href = "#">
dolor
</a><a  href = "#">
sit
</a><a  href = "#">
amet
</a><a  href = "#">
consectetur 
</a><a  href = "#">
adipiscing 
</a><a  href = "#">
elit
</a>

我知道我可以通过以下应用使其顺利结束(在某些浏览器上，例如 Firefox 是，Chrome 否):

I know I can make it end smoothly (on some browser, eg. Firefox yes, Chrome no) by applying:

    a { transition: all 2s ease; }

因此，如果它加载到(例如)40%，它会从 40% 动画回到 0%，而不是立即下降到 0%.

so that if it's loaded up to (for example) 40%, it will animate back from 40% to 0% instead of immediately dropping to 0%.

- 我也知道我可以使用 jQuery 动画而不是 CSS3 动画并让它以这种方式工作；(编辑:根据评论，如果我没看错的话，即使是 jQuery 动画也不会这样工作)

- I also know that I can use jQuery animations instead of CSS3 animation and make it work that way; (EDIT: according to the comment, not even jQuery animations will work this way, if I got that right)

作为一名 CSS3 动画新手，我在这里要问的是:

What I'm asking here, as a CSS3 Animation newbie, is:

是否有一种纯 CSS3 方式可以强制动画运行到 100%，无论初始条件是否不再有效?

推荐答案

正如评论中所讨论的，即使在最初应用动画的选择器规则不再适用之后，目前也无法强制动画完成一个完整的循环.

As discussed in comments there is currently no way to force an animation to complete one full cycle even after the selector rule which originally applied the animation is no longer applicable.

实现此目的的唯一方法是使用脚本.下面是使用 JavaScript 的示例片段.它的作用是在元素获得焦点时向元素添加一个类(具有 animation 属性集)，然后仅在动画结束时将其移除.

The only way to achieve this is by using scripting. Below is a sample snippet using JavaScript. What this does is to add a class (that has the animation property set) to the element when it gains focus and then remove it only when the animation ends.

^{注意: 我在片段中使用了 webkitAnimationEnd 事件，所以它在其他浏览器中不起作用.该代码还需要更多微调，因为它目前仅在动画结束时删除该类.因此，如果您在一个周期完成之前退出并加入标签，则不会发生任何事情.}

window.onload = function() {
  var anchors = document.querySelectorAll('a');
  for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('focus', function() {
      addanim(this);
    });
    anchors[i].addEventListener('webkitAnimationEnd', function() {
      endanim(this);
    });
  }

  function addanim(el) {
    el.classList.add('focus');
  }

  function endanim(el) {
    el.classList.remove('focus');
  }
}

@keyframes pressed {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
}
.focus {
  animation: pressed 2s;
}
a,
input {
  border: 1px solid silver;
  padding: 5px;
  height: 40px;
  line-height: 28px;
  margin: 0px;
  display: inline-block;
  width: 33.3%;
  box-sizing: border-box;
  background: white;
}
a {
  color: dodgerBlue;
  text-decoration: none;
}
input {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<input type="text" id="foo" value="Start here, then press tab" />
<a href="#">Lorem</a>
<a href="#">Ipsum</a>
<a href="#">dolor</a>
<a href="#">sit</a>
<a href="#">amet</a>
<a href="#">consectetur</a>
<a href="#">adipiscing</a>
<a href="#">elit</a>

提到的animationcancel事件在评论中(通过 BoltClock)可能对我们的案例更有用，但它只是在遇到动画异常结束时触发的事件.我们仍然需要编写自己的代码以使其持续到循环结束.

The animationcancel event mentioned in comments (by BoltClock) could have been more useful for our case but it is just an event that is fired when an abnormal end to the animation is encountered. We would still have to write our own code to make it continue till the end of a cycle.

这篇关于如果选择器不再匹配，如何将 CSS3 动画运行到最后?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！