transition頁面加載觸發問題解決方案

css3   -   “藝術品”，讓用戶體驗得到迅猛提升，例如今天咱們聊的這個transition屬性。

transition屬性的詳細概念就不再這里提及了，今天咱們研究一下transition給前端baby們帶來的一個苦惱：

用link導入外部css樣式表：代碼如下：

div{
    width:300px;
    height:300px;
    background:red;
    transform:rotate(90deg);
    /*過渡屬性出現：從90deg開始過渡到下面的360deg*/
    transition:4s;
}
div:hover{
    transform:rotate(360deg);
}
/* 
　　運行結果描述：
　　當前div會在頁面第一次加載的時候觸發transition過渡一次到90deg,不會直接顯示為初始狀態。 
　　這是由於link引入的css和html加載順序的原因 
*/

 

問題解決方案如下：

　　首先在body添加類名 transition_none，先禁用所有的transition過渡效果。以保證初始狀態的直接渲染。

　　  css設置如下 ：

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

　　

　　下面利用window.onload 等頁面加載完畢去掉 transition_none類名，保證下面正常過渡交互。

<script>
        let getBody =  document.querySelector('.transition_none');
        window.onload = function(){
             getBody.className = '';
        }    
</script>