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

问题描述

我一直认为CSS3动画（与CSS3转换不同）一旦开始，总是完成作业，无论选择器是否不再匹配激活它们的元素。

我今天意识到我可能是错误的。

在下面的例子中， code>：focus 和：active 伪类。
关注第一个文本字段：

• 如果慢慢按下选项卡按钮，动画正确开始和结束;


• 如果您快速按下标签按钮，您将看到一旦新元素获得焦点，旧元素的动画立即结束和消失。

  @  -  webkit-keyframes press {0％，100％{transform：scale（1）; } 50％{transform：scale（2）; }} @ {0％，100％{transform：scale（1）; } 50％{transform：scale（2）; }} a：focus，a：active {-webkit-animation：pressed 2s;动画：按2s; } a，input {border：1px solid silver; padding：5px; height：40px; line-height：28px; margin：0px; display：inline-block;宽度：33.3％; box-sizing：border-box;背景：白色; vertical-align：middle;} a {color：dodgerBlue; text-decoration：none;} input {color：red;}  

 < input type =textid =foovalue =从这里开始，然后按Tab键/>< a href =＃> Lorem< / a>< a href = >存有< / A>< A HREF =＃>悲< / A>< A HREF =＃>坐< / A>< A HREF =＃>阿梅德< / A>&下; A HREF =＃> consectetur&下; / A>&下; A HREF =＃> adipiscing&下; / A>&下; A HREF =＃> ELIT&下; / A> 
 
 
 
我知道我可以让它顺利结束（在某些浏览器上，例如Firefox是，Chrome否）通过应用：
  a {transition：all 2s ease; } 
  
，因此如果它加载到（例如）40％，它将从40 
 
 
 
   - 我也知道我可以使用jQuery动画而不是CSS3动画，并使其工作方式;  （ EDIT ：根据注释，即使jQuery动画也可以这样工作） 
 
 
我在这里要求的CSS3动画新手是：
 
 
 
 有一个纯CSS3方式无论初始条件是否无效，强制动画的播放速度可达100％？ 
解决方案
正如在注释中讨论的，目前没有办法强制动画完成一个完整的周期，即使原先应用动画的选择器规则不再适用。
 
 
 
只有通过使用脚本来实现这一点。以下是使用JavaScript的示例代码段。这是做一个类（有动画属性集）添加到元素，当它获得焦点，然后删除它只有当动画结束时。
 
 
 
  注意：  
 我在代码段中使用了webkitAnimationEnd事件，因此它不会在其他浏览器。代码还需要更多的微调，因为它目前只在动画结束时删除类。所以，如果你在一个循环完成之前选项卡和选项卡，没有任何反应。 
  
 
 
 
 
 
 
  window.onload = function（）{var anchors = document.querySelectorAll（'a'）; for（var i = 0; i  
 
  @keyframes press {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;宽度：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 =textid =foovalue =从这里开始，然后按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  事件对我们的情况可能更有用，但它只是一个被触发的事件当遇到异常结束的动画时。我们仍然必须编写我们自己的代码，以使它继续，直到一个周期的结束。
 
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.

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


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>





I know I can make it end smoothly (on some browser, eg. Firefox yes, Chrome no) by applying:
    a { transition: all 2s ease; }
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%.

- 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)

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

is there a pure CSS3 way to force the animation to run up to 100%, no matter if the initial condition is not valid anymore ?
解决方案
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.

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.

Note:
 I have used webkitAnimationEnd event in the snippet and so it would not work in other browsers. The code also needs more fine tuning because it currently removes the class only on animation end. So, if you tab out and tab in before one cycle is completed then nothing happens.




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>





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屋！