如何臨時(shí)讓transition失效

我們給一個(gè)element設(shè)置了transition效果，但某些特殊情況，我們希望讓transition臨時(shí)失效。
我們第一反應(yīng)就是先移除transition設(shè)置，等其他屬性設(shè)置完成之后再還原transition設(shè)置。
但瀏覽器有時(shí)候會(huì)讓我們感覺(jué)事與愿違
看下面這段代碼，你覺(jué)得會(huì)不會(huì)有transition動(dòng)畫(huà)效果？

<div id="test"></div> <script>window.onload = function(){var div = document.getElementById("test");div.style.width="500px";div.style.transition="all 2s ease";}; </script>

答案是有的。
之所以會(huì)出現(xiàn)這種情況，與javascript單線(xiàn)程有關(guān)，給dom設(shè)置style，只是一個(gè)賦值的過(guò)程，瀏覽器引擎不會(huì)立即去渲染，所以會(huì)看到動(dòng)畫(huà)效果。
那么遇到這種情況，如何去解決呢？
大家可能首先會(huì)想到 setTimeout()，但感覺(jué)不是那么自然。

還有另外一種更好的方法，實(shí)用getComputedStyle()方法強(qiáng)制讓當(dāng)前設(shè)置生效

<div id="test"></div> <script>window.onload = function(){var div = document.getElementById("test");div.style.width="500px";//獲取計(jì)算后的寬度window.getComputedStyle(div).width;div.style.transition="all 2s ease";}; </script>

transitionend 事件

大家都知道，KISSY1.4中支持了transition動(dòng)畫(huà)，用法如下：

KISSY.add(function(S,Node,Anim){Node.all("#test").animate({transform: "translate3d(-100px,0,0)"}, {duration: .3,//增加useTransition配置即可useTransition:true,easing: "ease-out",complete: function(){//your code}}); },{requires:['node','anim'] })

剛開(kāi)始很好奇，覺(jué)得肯定需要不少代碼才能實(shí)現(xiàn)支持原生動(dòng)畫(huà)，看了源碼之后才發(fā)現(xiàn)其實(shí)挺簡(jiǎn)單，關(guān)鍵點(diǎn)是transitionend事件

<style> #test {width:200px;height: 200px;padding:10px;background-color: #8bb8f3;transition: all 1s ease; } #test:hover {background-color: #ff5500; } </style> <div id="test">touch me</div> <script>document.getElementById("test").addEventListener("transitionend",function(ev){console.log(ev);alert(1);}) </script>

transition與visibility

-webkit-transition: visibility 0s linear .2s;

在研究google phone版導(dǎo)航菜單效果的時(shí)候，無(wú)意中發(fā)現(xiàn)css中有上面這么一段。
visibility不就是用來(lái)實(shí)現(xiàn)顯示、隱藏效果的嗎，與過(guò)度有什么關(guān)系呢？
不過(guò)直覺(jué)告訴我，google的工程師不會(huì)這么無(wú)聊，寫(xiě)一段毫無(wú)用處的代碼

用相關(guān)的關(guān)鍵字搜索了一下，果然暗藏玄機(jī)
不過(guò)用一兩句話(huà)說(shuō)不明白，直接看這篇文章http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/

看來(lái)任何細(xì)節(jié)深挖下去都會(huì)有收獲。

啟用硬件加速

這個(gè)大家可能都知道，方法也有好幾種，介紹的文章也多，這里順便記錄一下。

變化某些屬性，比如 width，left，瀏覽器會(huì)重新計(jì)算每一幀的顯示效果，這嚴(yán)重影響速度，尤其是在移動(dòng)設(shè)備上。解決辦法就是讓 GPU 來(lái)做這些運(yùn)算，簡(jiǎn)單的說(shuō)，就是將元素轉(zhuǎn)化為圖片再制作變化效果，而不是重新計(jì)算每一幀的 CSS 樣式。

.test{//觸發(fā)GPU加速transform: translate3d(0,0,0); }

轉(zhuǎn)載于:https://www.cnblogs.com/human/p/3773250.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的CSS3 Transitions 你可能不知道的知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。