transition页面加载触发问题解决方案

墨守成规如何成功

于 2023-02-09 09:51:30 发布

阅读量459

点赞数

分类专栏： css 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_29965101/article/details/128947472

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章讲述了在页面加载时，由于CSS的transition属性导致元素初始状态不是直接渲染，而是有过渡效果。为了解决这个问题，文章提出了在body上添加过渡禁用类，然后在页面完全加载后移除该类，确保元素能直接显示初始状态，而在后续交互中正常应用过渡效果。

摘要由CSDN通过智能技术生成

问题: 页面加载触时所有 transform 都会自动渲染一次。我们要的是直接渲染，而不是渐变渲染

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过渡效果。以保证初始状态的直接渲染。

.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>