JavaScript 和 CSS 执行顺序？

Question

JS 部分：

function removeTransition(e) {

          if (e.propertyName !== 'transform') return;

           e.target.classList.remove('playing');

         }

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

css 部分：

.key {

  transition: all .07s ease;

}

.playing {

  box-shadow: 0 0 1rem #ffc600;

  transform: scale(1.1);

  border-color: #ffc600;

}

其余还有部分代码，主要是监听键盘上的keydown事件，当某个key被按下后，执行：

key.classList.add('playing');

我不清除的是，removeTransition 在什么时候被调用？以及 .remove('playing')之后，新的样式在什么时候渲染？

查到浏览器在处理 css 的时候，会先终止 JS 的执行。那 transitioned事件在什么时候被触发？

Answer 1

transitionend 事件会在 CSS transition 结束后触发。在你的例子中，transitionend 确实会多次触发。比如transition: width 2s, height 2s, background-color 2s, transform 2s;那么 transitionend 事件会被触发 4 次。如果在中途取消了过渡动画，那么 transitionend 就不会触发。或者 transition 完成前设置 display 为 "none"，事件同样不会被触发。

Answer 2

transitioned是在css的动画执行完之后

Answer 3

transition后加过渡时间，transitionend 事件会在时间间隔后才会被触发。所以我的理解是css先加载，但是这个过渡的过程是异步的，此时绑定transitionend 事件的脚本已经执行到了。不知道我这样理解对不对，如果不对还望有人指正。我做了一个实验：html：<div class="transition_div" id="transition_div" onmouseover="fun_hover()"></div>js：function fun_transitionend(){&nbsp; &nbsp; console.log("transition end");}function fun_hover(){&nbsp; &nbsp; console.log("start event binding");&nbsp; &nbsp; document.getElementById("transition_div").addEventListener('transitionend',fun_transitionend);}css：.transition_div{&nbsp; &nbsp; height:100px;&nbsp; &nbsp; width:100px;&nbsp; &nbsp; background:red;&nbsp; &nbsp; -webkit-transition:width 5s;&nbsp; &nbsp; -moz-transition:width&nbsp; 5s;&nbsp; &nbsp; -ms-transition:width&nbsp; 5s;&nbsp; &nbsp; -o-transition:width&nbsp; 5s;&nbsp; &nbsp; transition:width&nbsp; 5s;}.transition_div:hover{&nbsp; &nbsp; width:300px;}图形开始过渡变换宽度的时候，事件绑定代码开始执行，变换完成后触发transitionend事件处理函数。