亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

暫時禁用CSS過渡效果的最干凈方法是什么?

暫時禁用CSS過渡效果的最干凈方法是什么?

慕神8447489 2019-11-22 14:57:54
我有一個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插件,我需要暫時禁用這些效果,以便可以平滑地調整其大小。臨時禁用這些效果(然后重新啟用它們)的最優雅的方法是什么,因為它們可能是由父母應用的,也可能根本沒有應用。
查看完整描述

3 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

添加另一個阻止過渡的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

查看完整回答
反對 回復 2019-11-22
?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

我會提倡按照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');


查看完整回答
反對 回復 2019-11-22
  • 3 回答
  • 0 關注
  • 1408 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號