如果选择器不再匹配，如何将CSS3动画运行到最后？

Question

我一直认为CSS3动画（与CSS3 Transitions不同） 一旦启动，就总是完成工作 ，无论选择器是否与激活它们的元素都不匹配。

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

在以下示例中，动画由:focus和:active类触发。专注于第一个文本字段：

• 如果tab缓慢按下按钮，您将看到动画正确开始和结束；

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

  @-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;
  

  }

  Lorem

Answer 1

如评论中所讨论的，即使在最初应用该动画的选择器规则不再适用之后，目前也没有办法强制动画完成一个完整的周期。

实现此目的的唯一方法是使用脚本。以下是使用JavaScript的示例代码段。这样做是animation在元素获得焦点时向该元素添加一个类（已设置属性），然后仅在动画结束时将其删除。

注意：
我已在代码段中使用了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提出）对于我们的案例可能更有用，但它只是遇到动画异常结束时触发的事件。我们仍然必须编写自己的代码，以使其继续到周期结束。