鍍金池/ 問答/HTML/ JavaScript 和 CSS 執(zhí)行順序？

JavaScript 和 CSS 執(zhí)行順序？

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

其余還有部分代碼，主要是監(jiān)聽鍵盤上的keydown事件，當(dāng)某個(gè)key被按下后，執(zhí)行：

key.classList.add('playing');

我不清除的是，removeTransition 在什么時(shí)候被調(diào)用？以及 .remove('playing')之后，新的樣式在什么時(shí)候渲染？

查到瀏覽器在處理 css 的時(shí)候，會(huì)先終止 JS 的執(zhí)行。那 transitioned事件在什么時(shí)候被觸發(fā)？

回答
編輯回答
空白格

transitionend 事件會(huì)在 CSS transition 結(jié)束后觸發(fā)。

在你的例子中，transitionend 確實(shí)會(huì)多次觸發(fā)。

比如

transition: width 2s, height 2s, background-color 2s, transform 2s;

那么 transitionend 事件會(huì)被觸發(fā) 4 次。

如果在中途取消了過渡動(dòng)畫，那么 transitionend 就不會(huì)觸發(fā)?；蛘?transition 完成前設(shè)置 display 為 "none"，事件同樣不會(huì)被觸發(fā)。

2018年3月9日 01:06
編輯回答
冷咖啡

transitioned是在css的動(dòng)畫執(zhí)行完之后

2017年1月20日 00:47
編輯回答
哎呦喂

transition后加過渡時(shí)間，transitionend 事件會(huì)在時(shí)間間隔后才會(huì)被觸發(fā)。所以我的理解是css先加載，但是這個(gè)過渡的過程是異步的，此時(shí)綁定transitionend 事件的腳本已經(jīng)執(zhí)行到了。不知道我這樣理解對(duì)不對(duì)，如果不對(duì)還望有人指正。
我做了一個(gè)實(shí)驗(yàn)：
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;
}

圖形開始過渡變換寬度的時(shí)候，事件綁定代碼開始執(zhí)行，變換完成后觸發(fā)transitionend事件處理函數(shù)。

2018年1月4日 14:33