Jaki jest najczystszy sposób na tymczasowe wyłączenie efektów przejścia CSS?

Mam element DOM z zastosowanymi niektórymi / wszystkimi następującymi efektami:

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

Piszę wtyczkę jQuery, która zmienia rozmiar tego elementu, muszę tymczasowo wyłączyć te efekty, aby móc płynnie zmieniać rozmiar.

Jaki jest najbardziej elegancki sposób tymczasowego wyłączenia tych efektów (a następnie ich ponownego włączenia), biorąc pod uwagę, że można je zastosować od rodziców lub w ogóle nie można zastosować.

Krótka odpowiedź

Użyj tego CSS:

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

Plus ten JS (bez 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

Lub ten JS z jQuery ...

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

... lub równoważny kod przy użyciu dowolnej innej biblioteki lub frameworka, z którym pracujesz.

Wyjaśnienie

To właściwie dość subtelny problem.

Po pierwsze, prawdopodobnie chcesz utworzyć klasę „notransition”, którą możesz zastosować do elementów, aby ustawić ich *-transitionatrybuty CSS none. Na przykład:

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

_{(Drobny na bok - zauważ brak -ms-transitiontam. Nie potrzebujesz go. Pierwszą wersją Internet Explorera do obsługi przejść w ogóle była IE 10, która obsługiwała je bez prefiksu).}

Ale to tylko styl i to jest łatwe. Kiedy spróbujesz skorzystać z tej klasy, wpadniesz w pułapkę. Pułapka polega na tym, że taki kod nie będzie działał w sposób, jakiego można naiwnie oczekiwać:

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

Naiwnie możesz pomyśleć, że zmiana wysokości nie będzie animowana, ponieważ dzieje się tak, gdy stosowana jest klasa „notransition”. Jednak w rzeczywistości będzie animowany, przynajmniej we wszystkich nowoczesnych przeglądarkach, które wypróbowałem. Problem polega na tym, że przeglądarka buforuje zmiany stylu, które musi wprowadzić, aż JavaScript zakończy wykonywanie, a następnie dokonuje wszystkich zmian w jednym przepływie. W wyniku tego następuje ponowne wlanie, w którym nie ma zmiany siatki określającej, czy przejścia są włączone, ale występuje zmiana wysokości netto. W związku z tym animuje zmianę wysokości.

Można pomyśleć, że rozsądnym i czystym sposobem na obejście tego byłoby ominięcie usunięcia klasy „notransition” w czasie 1 ms, jak poniżej:

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

ale to też nie działa niezawodnie. Nie udało mi się złamać powyższego kodu w przeglądarkach WebKit, ale w Firefoksie (zarówno na powolnych, jak i szybkich komputerach) czasami (pozornie przypadkowo) dostajesz takie samo zachowanie jak naiwne podejście. Wydaje mi się, że powodem jest to, że wykonanie JavaScript może być na tyle powolne, że funkcja limitu czasu czeka na wykonanie do czasu, gdy przeglądarka jest bezczynna, i w przeciwnym razie pomyślałaby o oportunistycznym przepełnieniu, a jeśli tak się stanie, Firefox wykonuje funkcję w kolejce przed ponownym zalaniem.

Jedynym rozwiązaniem, jakie znalazłem dla tego problemu, jest wymuszenie ponownego wlewania elementu, opróżnienie dokonanych w nim zmian CSS, przed usunięciem klasy „notransition”. Można to zrobić na wiele sposobów - zobacz tutaj . Najbliższą „standardową” metodą jest odczytanie offsetHeightwłaściwości elementu.

Jednym z faktycznie działających rozwiązań jest

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

Oto skrzypce JS, które ilustrują trzy możliwe podejścia, które tu opisałem (zarówno jedno udane, jak i dwa nieudane): http://jsfiddle.net/2uVAA/131/

Zalecałbym wyłączenie animacji zgodnie z sugestią DaneSoul, ale uczynienie przełącznika globalnym:

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

.notransitionmożna następnie zastosować do bodyelementu, skutecznie zastępując dowolną animację przejścia na stronie:

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

Dodaj dodatkową klasę CSS, która blokuje przejście, a następnie usuń ją, aby powrócić do poprzedniego stanu. Dzięki temu zarówno kod CSS, jak i kod JQuery są krótkie, proste i zrozumiałe.

CSS :

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

!important dodano, aby mieć pewność, że ta reguła będzie miała większą „wagę”, ponieważ ID jest zwykle bardziej szczegółowe niż klasa.

JQuery :

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

Dla czystego roztworu JS (bez klas CSS), po prostu ustawić transitionsię 'none'. Aby przywrócić przejście określone w CSS, ustaw transitionpusty ciąg.

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

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

Jeśli korzystasz z prefiksów dostawców, musisz je również ustawić.

elem.style.webkitTransition = 'none'

Za pomocą tego kodu css możesz wyłączyć animację, przejścia, przekształcanie wszystkich elementów na stronie

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

Myślę, że możesz utworzyć osobną klasę css, której możesz użyć w następujących przypadkach:

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

Następnie w jQuery przełączałbyś klasę tak:

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

Jeśli potrzebujesz prostego rozwiązania eliminującego jquery, aby zapobiec wszystkim przejściom:

1. Dodaj ten CSS:

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

2. A potem w twoim 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)

Jeśli chcesz usunąć przejścia, transformacje i animacje CSS z bieżącej strony, możesz po prostu wykonać ten mały skrypt, który napisałem (w konsoli przeglądarki):

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

Do załadowania tego pliku css używa vanillaJS . Oto także repozytorium github na wypadek, gdybyś chciał użyć go w kontekście skrobaka (Ruby-Selenium): remove-CSS-animations-repo

robi

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

w twoich js zabij to?

oczywiście powtórz dla każdego.

Miałbym klasę w twoim CSS w ten sposób:

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

a następnie w jQuery:

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