初期状態と最終状態が同一の場合、遷移先は起動しません。

Question

以下の例では、CSSを使用してbackground-color遷移を行い、両方のdivのtransitionendイベントを処理しようとしています。

残念ながら、transitionendは、最初と最後の背景色としてdiv2のために解雇されていませんが同じである：

var div1 = $('#div1'); 
 
var div2 = $('#div2'); 
 

 
$('#toggle').on('click', function() { 
 
    div1.toggleClass('toggled'); 
 
    div2.toggleClass('toggled'); 
 
}) 
 

 
div1.on('transitionend', function() { 
 
    console.log('div1 transitionend') 
 
}) 
 

 
div2.on('transitionend', function() { 
 
    console.log('div2 transitionend') 
 
})

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: background-color .5s; 
 
} 
 

 
#div1 { 
 
    background-color: red; 
 
} 
 

 
#div2 { 
 
    background-color: green; 
 
} 
 

 
.toggled { 
 
    background-color: green !important; 
 
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
<div id="div1"></div> 
 

 
<div id="div2"></div> 
 

 
<button id="toggle">Toggle animation</button>

は、どのように私も例にtransitionendを扱うachiveことができたときに、初期状態と最終状態同じだ？

Answer 1

遷移は、一般にstyle-change-eventが発生したときに発生します。つまり、要素のスタイル（プロパティまたはそれ以上の値）が変更されると、遷移が開始されます。 W3Cの仕様（期待どおり）は、スタイル変更イベントがいつトリガされるかを定義せず、実装に任せます。以下は

私は、この特定のトピック（アンカー下記の2 ^NDパラ）についてW3C Specsに見つけることができたことで最もです：

スタイルの変更イベントが発生すると、実装はに基づいて移行を開始する必要がありますそのイベントで変更された計算値はです。

実際には、移行がいつ開始されるべきかについて、さらに決定的な定義があるようです。これは、セクションの終わりに向かって発見されたが、this anchorによって指さ：

次のすべてに該当する場合：

は

• 要素は、プロパティの実行中の移行を持っていない、
• スタイルはとは異なり、そのプロパティため変更後のスタイルで補間することができる前に、変更、
• 要素は
• がマッチング遷移プロパティ値が存在し、プロパティの変更後のスタイルは異なる性質又は完了遷移の終了値の完了遷移を有し、
• ありません結合持続時間は、その後の実装が完了した遷移のセットから完了遷移（存在する場合）を除去し、その遷移を開始する必要があり、

0より大きい：

• 開始時刻が一致する遷移遅延プラススタイル変更イベントの時間は、
• 終了時刻が開始時刻プラスマッチング遷移期間である、
• 開始値における遷移プロパティの値であります変更前のスタイル、
• 終了値が変更後のスタイルに移行プロパティの値であり、
• 逆転調整開始値は開始値と同じであり、 反転短縮率は1
あります

今

---

要素に設定されたプロパティのいずれも受けていないときに私のUAがどのように動作するかを理解し、それらがどのように最適化されていたであろうに基づいて、私は彼らが移行開始イベントを発射するための何らかの理由が表示されませんおつり。 UAには余計な負担がかかり、簡単に避けることができます。遷移開始イベント自体が存在しない場合、そのような場合に遷移終了イベントが発生する可能性はほとんどありません。

ダミープロパティの変更（または） + transition-delayに等しい値のタイマーを使用して、transitionendを模倣する可能性が高いようです。