短い答え
このCSSを使用します。
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
さらに、このJS（jQueryなし）...
someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions
またはjQueryを使用したこのJS ...
$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions
...または作業している他のライブラリまたはフレームワークを使用する同等のコード。
説明
これは実際にはかなり微妙な問題です。
最初に、要素に適用して*-transitionCSS属性をに設定できる「notransition」クラスを作成する必要がありますnone。例えば：
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
（マイナーな余談- -ms-transitionそこに欠けていることに注意してください。それは必要ありません。移行をまったくサポートする最初のバージョンのInternet Explorer は、プレフィックスなしでサポートするIE 10でした。）
しかし、それは単なるスタイルであり、簡単なことです。このクラスを試してみると、罠にぶつかります。落とし穴は、このようなコードは、単純に期待する方法では機能しないことです。
// Don't do things this way! It doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
someElement.classList.remove('notransition')
単純に、 'notransition'クラスが適用されている間に高さが変化するので、高さの変化はアニメーション化されないと思われるかもしれません。しかし実際には、少なくとも私が試したすべての最新のブラウザーでは、アニメーション化されます。問題は、JavaScriptの実行が完了するまでブラウザーが行う必要があるスタイル変更をキャッシュし、その後、すべての変更を1回のリフローで行うことです。その結果、トランジションが有効であるかどうかの正味の変化はありませんが、高さの正味の変化があるリフローを実行します。その結果、高さの変化をアニメーション化します。
これを回避するための合理的でクリーンな方法は、次のように、「notransition」クラスの削除を1msのタイムアウトでラップすることだと思うかもしれません。
// Don't do things this way! It STILL doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
setTimeout(function () {someElement.classList.remove('notransition')}, 1);
しかし、これも確実に機能しません。WebKitブラウザーで上記のコードを壊すことはできませんでしたが、Firefoxでは（遅いマシンと速いマシンの両方で）単純なアプローチを使用した場合と同じ動作を（ランダムに見えるように）ときどき得ます。この理由は、JavaScriptの実行が遅くなり、ブラウザがアイドル状態になるまでにタイムアウト関数が実行を待機する可能性があり、それ以外の場合は日和見リフローの実行を考えているためです。 Firefoxはリフローの前にキューに入れられた関数を実行します。
この問題に対して私が見つけた唯一の解決策は、「notransition」クラスを削除する前に、要素に行われたCSSの変更をフラッシュして、要素を強制的にリフローすることです。これを行うにはさまざまな方法があります- いくつかはここを参照してください。これを行う「標準」の方法に最も近いのoffsetHeightは、要素のプロパティを読み取ることです。
実際に機能する1つの解決策は、
someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions
これが、ここで説明した3つの可能なアプローチ（1つの成功したアプローチと2つの失敗したアプローチの両方）を示すJSフィドルです。http：
//jsfiddle.net/2uVAA/131/