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>