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事件处理函数。