关于CSS中transition属性导致页面第一次加载时出现变换动画的解决方案

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

- 第一个就如同上面所说，把css放进html中的style中，便能正确按照顺序进行加载，从而不会导致尴尬的动画变换
 - 第二种方法，给body加上一个类，比如说叫做preLoad,那么就是如下
```html
<body class="preLoad">
...
</body>
```
然后在css中加上一个类，里面写上
```css
.preLoad * {
   transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}
```
这里说白了，就是在加载文档之前，先把所有的transition全部禁掉，等到初始化完了，再在最后的js中，把这个class移除来解决这个问题
```javascript
    document.onreadystatechange = currentState

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

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

PS:是在玩动态名片的时候发现的坑，目前已经完善了：[动态卡片][1]

[1]: https://www.onesnowwarrior.cn/motion_card/index.html

Last modification：March 31, 2021