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(){
    console.log("transition end");
}
function fun_hover(){
    console.log("start event binding");
    document.getElementById("transition_div").addEventListener('transitionend',fun_transitionend);
}

css：

.transition_div{
    height:100px;
    width:100px;
    background:red;
    -webkit-transition:width 5s;
    -moz-transition:width  5s;
    -ms-transition:width  5s;
    -o-transition:width  5s;
    transition:width  5s;
}
.transition_div:hover
{
    width:300px;
}

图形开始过渡变换宽度的时候，事件绑定代码开始执行，变换完成后触发transitionend事件处理函数。