今天玩页面设计的时候,无意中发现有这种问题存在
在网上也找了解决方案,但是发现,都是用jQuery解决的,或者就是把css直接写到html文件里面来解决的,没有一个用原生js来解决。
关于这个问题的原因,似乎是因为放在文件中进行加载就会导致先读取css,然后此时文档还没有初始化,所以就会出现初始化文档时的动画变换

解决方案

  • 第一个就如同上面所说,把css放进html中的style中,便能正确按照顺序进行加载,从而不会导致尴尬的动画变换
  • 第二种方法,给body加上一个类,比如说叫做preLoad,那么就是如下
<body class="preLoad">
...
</body>

然后在css中加上一个类,里面写上

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

这里说白了,就是在加载文档之前,先把所有的transition全部禁掉,等到初始化完了,再在最后的js中,把这个class移除来解决这个问题

    document.onreadystatechange = currentState

    function currentState() {
    //这里判断文档是否加载完成,加载完成就移除preLoad类
      if (document.readyState == 'complete') {
        let body = document.getElementsByClassName('preLoad')[0]
        body.classList.remove('preLoad')
      }
    }

在此做个记录,作为自己踩坑的笔记

PS:是在玩动态名片的时候发现的坑,目前已经完善了:动态卡片

Last modification:March 31st, 2021 at 05:11 pm
如果觉得我的文章对你有用,请随意赞赏