อะไรคือวิธีที่สะอาดที่สุดในการปิดใช้งานเอฟเฟกต์การเปลี่ยน 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

หรือ JS นี้ด้วย jQuery ...

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

... หรือรหัสเทียบเท่าโดยใช้ไลบรารีหรือกรอบงานอื่นที่คุณกำลังทำงานด้วย

คำอธิบาย

นี่เป็นปัญหาที่ค่อนข้างบอบบาง

ขึ้นเป็นครั้งแรกคุณอาจต้องการที่จะสร้าง 'notransition' class ที่คุณสามารถนำไปใช้กับองค์ประกอบในการตั้งค่าของพวกเขา*-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')

อย่างไร้เดียงสาคุณอาจคิดว่าการเปลี่ยนแปลงความสูงจะไม่เคลื่อนไหวเพราะมันเกิดขึ้นในขณะที่มีการใช้คลาส 'notransition' ในความเป็นจริงแม้ว่ามันจะเป็นภาพเคลื่อนไหวอย่างน้อยในเบราว์เซอร์ที่ทันสมัยทั้งหมดที่ฉันได้ลอง ปัญหาคือเบราว์เซอร์กำลังแคชการเปลี่ยนแปลงในสไตล์ที่จำเป็นต้องใช้จนกว่า JavaScript จะเสร็จสิ้นการเรียกใช้งานจากนั้นทำการเปลี่ยนแปลงทั้งหมดในการ reflow ครั้งเดียว เป็นผลให้มันทำการ reflow ที่ไม่มีการเปลี่ยนแปลงสุทธิว่าเปิดใช้งานการเปลี่ยนหรือไม่ แต่มีการเปลี่ยนแปลงสุทธิกับความสูง ดังนั้นมันจะเคลื่อนไหวการเปลี่ยนแปลงความสูง

คุณอาจคิดว่าวิธีที่สมเหตุสมผลและสะอาดตาในการหลีกเลี่ยงสิ่งนี้คือการลบการกำจัด 'notransition' ในเวลา 1 มิลลิวินาทีเช่นนี้

// 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 จะช้าพอที่ฟังก์ชันการหมดเวลาจะรอดำเนินการตามเวลาที่เบราว์เซอร์ไม่ได้ทำงานและจะคิดเกี่ยวกับการทำ reflow แบบฉวยโอกาสและหากเกิดเหตุการณ์ขึ้น Firefox ดำเนินการฟังก์ชันที่อยู่ในคิวก่อนที่จะทำการ reflow

ทางออกเดียวที่ฉันพบปัญหาคือการบังคับให้ reflow ขององค์ประกอบล้างการเปลี่ยนแปลง CSS ที่ทำกับมันก่อนที่จะลบชั้น 'notransition' มีหลายวิธีในการทำเช่นนี้ - ดูที่นี่สำหรับบางคน สิ่งที่ใกล้เคียงที่สุดคือวิธี 'มาตรฐาน' ในการทำเช่นนี้คือการอ่าน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/

ฉันจะสนับสนุนการปิดใช้งานภาพเคลื่อนไหวตามที่ 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');

เพิ่มคลาส 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

สำหรับการแก้ปัญหา 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)

หากคุณต้องการลบการเปลี่ยน 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);

มันใช้ vanillaJS เพื่อโหลดไฟล์ cssนี้ นี่เป็น github repo ในกรณีที่คุณต้องการใช้ในบริบทของ scraper (Ruby-Selenium): remove-CSS-animations-repo

ทำ

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

ใน js ของคุณฆ่ามันเหรอ?

ทำซ้ำอย่างเห็นได้ชัดสำหรับแต่ละ

ฉันจะมีคลาสใน 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