私は現在、CSS トランジションを作成/管理するための jQuery プラグインを作成していますが、transition-duration でこの奇妙な動作を見つけました。
どうやら、トランジションの実行中は、トランジション中のプロパティが異なる値を受け取っていない限り、duration プロパティへの変更は無視されます。デュレーション自体によってトランジションが変化することはありません。
以下は、この例を示すコードです。以下は、私が達成しようとしている遷移動作をよりよく理解するための jsFiddle へのリンクです。
/* starting transition */
.t1 {
-webkit-transition-duration: 5s;
-webkit-transition-property: width;
width: 500px;
}
/* during the above, this will do nothing */
.t2 {
-webkit-transition-duration: 200ms;
-webkit-transition-property: width;
width: 500px;
}
/* but this will override the transition as expected */
.t3 {
-webkit-transition-duration: 200ms;
-webkit-transition-property: width;
width: 501px; /* 1 pixel added */
}
jsFiddle 1 - CSS 期間の問題: http://jsfiddle.net/danro/Kd58j/
jsFiddle 2 - jQuery を使用した望ましい効果: http://jsfiddle.net/danro/xPwc4/
更新された期間を受け入れるように遷移を強制する方法についてのアイデアはありますか?
アップデート
この動作は仕様で定義されているようですが、誰かが回避策を持っている場合は、まだ回避策があります。
(www.w3.org/TR/css3-transitions/#starting より)
プロパティの遷移が開始されると、「transition-timing-function」、「transition-duration」、または「transition-delay」プロパティが変更された場合でも、元のタイミング関数、期間、および遅延に基づいて実行を継続する必要があります。移行が完了する前に。