Was ist der sauberste Weg, um CSS-Übergangseffekte vorübergehend zu deaktivieren?

Ich habe ein DOM-Element mit einigen / allen der folgenden angewendeten Effekte:

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

Ich schreibe ein jQuery-Plugin, dessen Größe sich ändert. Ich muss diese Effekte vorübergehend deaktivieren, damit ich die Größe problemlos ändern kann.

Was ist die eleganteste Methode, um diese Effekte vorübergehend zu deaktivieren (und dann wieder zu aktivieren), da sie möglicherweise von den Eltern angewendet werden oder überhaupt nicht angewendet werden.

Kurze Antwort

Verwenden Sie dieses CSS:

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

Plus entweder diese JS (ohne 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

Oder dieses JS mit jQuery ...

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

... oder gleichwertiger Code mit einer anderen Bibliothek oder einem anderen Framework, mit dem Sie arbeiten.

Erläuterung

Dies ist eigentlich ein ziemlich subtiles Problem.

Zunächst möchten Sie wahrscheinlich eine 'notransition'-Klasse erstellen, die Sie auf Elemente anwenden können, um deren *-transitionCSS-Attribute festzulegen none. Zum Beispiel:

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

_{(Nebenbei bemerkt - beachten Sie das Fehlen eines -ms-transitionIn. Sie benötigen es nicht. Die erste Version von Internet Explorer, die Übergänge überhaupt unterstützt, war IE 10, die sie ohne Fix unterstützt.)}

Aber das ist nur Stil und das ist das Einfache. Wenn Sie versuchen, diese Klasse zu verwenden, stoßen Sie auf eine Falle. Die Falle ist, dass Code wie dieser nicht so funktioniert, wie Sie es naiv erwarten könnten:

// 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')

Naiv könnte man denken, dass die Änderung der Höhe nicht animiert wird, da dies geschieht, während die Klasse 'notransition' angewendet wird. In Wirklichkeit aber ist es werden animiert werden, zumindest in allen modernen Browsern habe ich versucht. Das Problem ist, dass der Browser die Stiländerungen zwischenspeichert, die er vornehmen muss, bis das JavaScript vollständig ausgeführt wird, und dann alle Änderungen in einem einzigen Reflow vornimmt. Infolgedessen wird ein Reflow durchgeführt, bei dem sich nicht netto ändert, ob Übergänge aktiviert sind oder nicht, sondern die Höhe netto geändert wird. Folglich wird die Höhenänderung animiert.

Sie könnten denken, ein vernünftiger und sauberer Weg, um dies zu umgehen, wäre, das Entfernen der 'notransition'-Klasse in eine Zeitüberschreitung von 1 ms wie folgt einzuschließen:

// 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);

aber das funktioniert auch nicht zuverlässig. Ich konnte den obigen Code in WebKit-Browsern nicht brechen, aber auf Firefox (sowohl auf langsamen als auch auf schnellen Computern) wird manchmal (scheinbar zufällig) das gleiche Verhalten wie bei der Verwendung des naiven Ansatzes angezeigt. Ich denke, der Grund dafür ist, dass die JavaScript-Ausführung möglicherweise so langsam ist, dass die Timeout-Funktion auf die Ausführung wartet, wenn der Browser inaktiv ist, und ansonsten über einen opportunistischen Reflow nachdenken würde. Wenn dieses Szenario eintritt, Firefox führt die Funktion in der Warteschlange vor dem Reflow aus.

Die einzige Lösung, die ich für das Problem gefunden habe, besteht darin , einen Reflow des Elements zu erzwingen und die daran vorgenommenen CSS-Änderungen zu löschen, bevor die Klasse 'notransition' entfernt wird. Es gibt verschiedene Möglichkeiten, dies zu tun - siehe hier für einige. Das, was einer Standardmethode am nächsten kommt, ist das Lesen der offsetHeightEigenschaft des Elements.

Eine Lösung, die tatsächlich funktioniert, ist

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

Hier ist eine JS-Geige, die die drei möglichen Ansätze veranschaulicht, die ich hier beschrieben habe (sowohl den einen erfolgreichen als auch die beiden erfolglosen): http://jsfiddle.net/2uVAA/131/

Fügen Sie eine zusätzliche CSS-Klasse hinzu, die den Übergang blockiert, und entfernen Sie sie, um zum vorherigen Status zurückzukehren. Dies macht sowohl CSS- als auch JQuery-Code kurz, einfach und verständlich.

CSS :

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

!important wurde hinzugefügt, um sicherzustellen, dass diese Regel mehr "Gewicht" hat, da ID normalerweise spezifischer als Klasse ist.

JQuery :

$('#elem').addClass('notransition'); // to remove transition
$('#elem').removeClass('notransition'); // to return to previouse transition

Ich würde empfehlen, die Animation zu deaktivieren, wie von DaneSoul vorgeschlagen, aber den Wechsel global zu gestalten:

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

.notransitionkann dann auf das bodyElement angewendet werden , wodurch alle Übergangsanimationen auf der Seite effektiv überschrieben werden:

$('body').toggleClass('notransition');

Für eine reine JS-Lösung (keine CSS-Klassen) setzen Sie einfach transitionauf 'none'. Um den im CSS angegebenen Übergang wiederherzustellen, setzen Sie den transitionauf eine leere Zeichenfolge.

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

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

Wenn Sie Herstellerpräfixe verwenden, müssen Sie diese ebenfalls festlegen.

elem.style.webkitTransition = 'none'

Mit diesem CSS-Code können Sie Animationen, Übergänge und Transformationen für alle Elemente auf der Seite deaktivieren

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

Ich denke, Sie könnten eine separate CSS-Klasse erstellen, die Sie in folgenden Fällen verwenden können:

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

Dann würden Sie in jQuery die Klasse wie folgt umschalten:

$('#<your-element>').addClass('disable-transition');

Wenn Sie eine einfache No-JQuery-Lösung wünschen, um alle Übergänge zu verhindern:

1. Fügen Sie dieses CSS hinzu:

body.no-transition * {
  transition: none !important;
}

2. Und dann in deinem 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)

Wenn Sie CSS-Übergänge, -Transformationen und -Animationen von der aktuellen Webseite entfernen möchten, können Sie einfach dieses kleine Skript ausführen, das ich geschrieben habe (in der Browserkonsole):

let filePath = "https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css";
let html = `<link rel="stylesheet" type="text/css" href="${filePath}">`;
document.querySelector("html > head").insertAdjacentHTML("beforeend", html);

Es verwendet vanillaJS, um diese CSS-Datei zu laden . Hier ist auch ein Github-Repo, falls Sie dies im Zusammenhang mit einem Scraper (Ruby-Selenium) verwenden möchten: remove-CSS-animations-repo

tut

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

in deinem js es töten?

offensichtlich für jeden wiederholen.

Ich hätte eine Klasse in Ihrem CSS wie folgt:

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

und dann in Ihrer jQuery:

$('#elem').addClass('no-transition'); //will disable it
$('#elem').removeClass('no-transition'); //will enable it