如何臨時讓transition失效

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

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

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

還有另外一種更好的方法，實用getComputedStyle()方法強制讓當前設置生效

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

transitionend 事件

大家都知道，KISSY1.4中支持了transition動畫，用法如下：

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'] })

剛開始很好奇，覺得肯定需要不少代碼才能實現支持原生動畫，看了源碼之后才發現其實挺簡單，關鍵點是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版導航菜單效果的時候，無意中發現css中有上面這么一段。
visibility不就是用來實現顯示、隱藏效果的嗎，與過度有什么關系呢？
不過直覺告訴我，google的工程師不會這么無聊，寫一段毫無用處的代碼

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

看來任何細節深挖下去都會有收獲。

啟用硬件加速

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

變化某些屬性，比如 width，left，瀏覽器會重新計算每一幀的顯示效果，這嚴重影響速度，尤其是在移動設備上。解決辦法就是讓 GPU 來做這些運算，簡單的說，就是將元素轉化為圖片再制作變化效果，而不是重新計算每一幀的 CSS 樣式。

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

轉載于:https://www.cnblogs.com/human/p/3773250.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。