236

次の効果の一部またはすべてが適用された DOM 要素があります。

#elem {
  -webkit-transition: height 0.4s ease;
  -moz-transition: height 0.4s ease;
  -o-transition: height 0.4s ease;
  transition: height 0.4s ease;
}

この要素のサイズを変更する jQuery プラグインを作成しています。スムーズにサイズ変更できるように、これらの効果を一時的に無効にする必要があります。

これらの効果が親から適用されるか、まったく適用されない可能性がある場合、これらの効果を一時的に無効にする (そして再度有効にする) 最もエレガントな方法は何ですか。

4

11 に答える 11

22

DaneSoul の提案に従ってアニメーションを無効にすることをお勧めしますが、スイッチをグローバルにします。

/*kill the transitions on any descendant elements of .notransition*/
.notransition * { 
  -webkit-transition: none !important; 
  -moz-transition: none !important; 
  -o-transition: none !important; 
  -ms-transition: none !important; 
  transition: none !important; 
}

.notransition次に、要素に適用してbody、ページ上の遷移アニメーションを効果的にオーバーライドできます。

$('body').toggleClass('notransition');
于 2012-06-21T06:45:16.613 に答える
22

遷移をブロックする追加の CSS クラスを追加し、それを削除して前の状態に戻します。これにより、CSS と JQuery の両方のコードが短く、シンプルになり、よく理解できるようになります。

CSS :

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

注: !importantID の使用はクラスよりも具体的であるため、このルールの優先順位が高くなるように追加されました。

Jクエリ：

$('#elem').addClass('notransition'); // to remove transition
$('#elem').removeClass('notransition'); // to return to previouse transition
于 2012-06-21T05:31:39.083 に答える
11

純粋な JS ソリューション (CSS クラスなし) の場合は、 を に設定するだけtransitionです'none'。CSS で指定されたとおりにトランジションを復元するには、transitionを空の文字列に設定します。

// Remove the transition
elem.style.transition = 'none';

// Restore the transition
elem.style.transition = '';

ベンダー プレフィックスを使用している場合は、それらも設定する必要があります。

elem.style.webkitTransition = 'none'
于 2015-05-14T01:49:25.140 に答える
11

このCSSコードを使用して、ページ内のすべての要素のアニメーション、トランジション、トランスフォームを無効にすることができます

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'/*CSS transitions*/' +
' -o-transition-property: none !important;' +
' -moz-transition-property: none !important;' +
' -ms-transition-property: none !important;' +
' -webkit-transition-property: none !important;' +
'  transition-property: none !important;' +
'/*CSS transforms*/' +
'  -o-transform: none !important;' +
' -moz-transform: none !important;' +
'   -ms-transform: none !important;' +
'  -webkit-transform: none !important;' +
'   transform: none !important;' +
'  /*CSS animations*/' +
'   -webkit-animation: none !important;' +
'   -moz-animation: none !important;' +
'   -o-animation: none !important;' +
'   -ms-animation: none !important;' +
'   animation: none !important;}';
   document.getElementsByTagName('head')[0].appendChild(style);
于 2015-10-07T09:12:35.020 に答える
2

これらの場合に使用できる別の css クラスを作成できると思います。

.disable-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  -ms-transition: none;
  transition: none;
}

次に、jQuery で次のようにクラスを切り替えます。

$('#<your-element>').addClass('disable-transition');
于 2012-06-21T05:30:43.950 に答える
1

すべての遷移を防止する単純な jquery を使用しないソリューションが必要な場合:

  1. この CSS を追加します。
body.no-transition * {
  transition: none !important;
}
  1. そしてあなたのjsで：
document.body.classList.add("no-transition");

// do your work, and then either immediately remove the class:

document.body.classList.remove("no-transition");

// or, if browser rendering takes longer and you need to wait until a paint or two:

setTimeout(() => document.body.classList.remove("no-transition"), 1);

// (try changing 1 to a larger value if the transition is still applying)
于 2020-04-23T04:58:24.077 に答える
-2

する

$('#elem').css('-webkit-transition','none !important');

あなたのjsでそれを殺しますか？

明らかにそれぞれについて繰り返します。

于 2012-06-21T05:25:40.957 に答える
-3

CSSに次のようなクラスがあります。

.no-transition { 
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

そしてあなたのjQueryで：

$('#elem').addClass('no-transition'); //will disable it
$('#elem').removeClass('no-transition'); //will enable it
于 2012-06-21T05:31:44.167 に答える