CSS 이행 효과를 일시적으로 디세블로 하는 가장 깨끗한 방법은 무엇입니까?

CSS 이행 효과를 일시적으로 디세블로 하는 가장 깨끗한 방법은 무엇입니까?

다음 효과의 일부/전부가 적용된 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 플러그인을 쓰고 있습니다. 원활하게 크기를 조정할 수 있도록 이러한 효과를 일시적으로 비활성화해야 합니다.

이러한 효과는 부모로부터 적용되거나 전혀 적용되지 않을 수 있으므로 일시적으로 비활성화(그리고 다시 활성화)하는 가장 우아한 방법은 무엇입니까?

단답

다음 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

...또는 다른 라이브러리나 프레임워크를 사용하는 동등한 코드도 사용할 수 있습니다.

설명.

이것은 사실 꽤 미묘한 문제이다.

' transition' 'not transition'이 아닌 'not transition'을 할 수 .*-transition에 CSS 어트리뷰트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')

순진하게, 여러분은 키의 변화가 '변화 금지' 클래스가 적용되는 동안 일어나기 때문에 활성화되지 않을 것이라고 생각할 수 있습니다.하지만 현실에서는 적어도 제가 사용해 본 모든 최신 브라우저에서는 애니메이션이 될 것입니다.문제는 브라우저가 JavaScript 실행이 완료될 때까지 필요한 스타일 변경 사항을 캐싱한 후 모든 변경 사항을 단일 리플로우 방식으로 적용한다는 것입니다.그 결과, 이행이 유효하게 되어 있는지 아닌지에 대해서는 순변화가 없고, 높이에는 순변화가 있는 리플로우를 실시합니다.이것에 의해, 높이 변화에 애니메이션을 준다.

이 문제를 회피하기 위한 합리적이고 깨끗한 방법은 다음과 같이 'not transition' 클래스의 삭제를 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 실행이 느릴 수 있으며, 그 시나리오가 발생하면 파이어폭스는 리플로우 전에 큐잉된 함수를 실행할 수 있기 때문입니다.

이 문제에 대한 유일한 해결책은 'not transition' 클래스를 삭제하기 전에 요소를 강제로 리플로우하고 CSS 변경을 플러시하는 것입니다.방법은 다양합니다.여기서 확인하세요.이 작업을 '표준'으로 하는 가장 가까운 방법은offsetHeight요소의 속성.

그렇다면 실제로 효과가 있는 솔루션 중 하나입니다.

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

JS 바이올린은 여기서 설명한 세 가지 접근법(성공한 접근법과 실패한 접근법 모두)을 설명합니다.http://jsfiddle.net/2uVAA/131/

Dane Soul이 제안한 것처럼 애니메이션을 비활성화하는 대신 글로벌하게 전환해야 합니다.

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

이행을 차단하는 CSS 클래스를 추가한 후 삭제하고 이전 상태로 돌아갑니다.이것에 의해, CSS와 JQuery 코드의 양쪽 모두가 짧고, 심플하고, 알기 쉽게 됩니다.

CSS:

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

★★★★★★!important은 id보다 이

JQuery:

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

솔루션(CSS의 경우는, 「JS」(CSS 「」)를 합니다.transition로로 합니다.'none'하려면 CSS를 transition을 사용하다

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

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

벤더 프리픽스를 사용하고 있는 경우는, 이러한 프리픽스도 설정할 필요가 있습니다.

elem.style.webkitTransition = 'none'

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

다음 경우에 사용할 수 있는 별도의 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');

모든 전환을 방지하는 단순한 No-jquery 솔루션을 원하는 경우:

1. 다음 CSS 추가:

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

2. 그리고 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)

이것은 나에게 있어서 용이하게 작용한 회피책입니다.질문에 대한 직접적인 답변은 아니지만 여전히 누군가를 도울 수 있습니다.

「 」를 작성하는 것이 , 「 」를 한다.notransition을 있던

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

가 창작했습니다.moveTransition 표시

.moveTransition {
      -webkit-transition: left 3s, top 3s;
      -moz-transition: left 3s, top 3s;
      -o-transition: left 3s, top 3s;
      transition: left 3s, top 3s;
}

그리고 이 클래스를 js로 요소에 추가했습니다.

element.classList.add("moveTransition")

나중에 set Timeout에서 삭제했습니다.

element.classList.remove("moveTransition")

다른 브라우저에서는 테스트 할 수 없었지만, 크롬에서는 완벽하게 동작합니다.

현재 웹 페이지에서 CSS 전환, 변환 및 애니메이션을 삭제할 경우 브라우저 콘솔 내에서 작성한 다음 스크립트를 실행하면 됩니다.

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

바닐라 사용이 css 파일을 로드하는 JS.또한 스크레이퍼(Ruby-Selenium)의 컨텍스트에서 사용하는 경우 github repo: remove-CSS-animations-repo

한다

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

J가 죽인다?

각각에 대해 명백하게 반복한다.

당신의 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

언급URL : https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily