关于CSS中transition属性导致页面第一次加载时出现变换动画的解决方案
今天玩页面设计的时候，无意中发现有这种问题存在在网上也找了解决方案，但是发现，都是用jQuery解决的，或者就是把css直接写到html文件里面来解决的，没有一个用原生js来解决。关于这个问题的原因，似乎是因为放在文件中进行加载就会导致先读取css，然后此时文档还没有初始化，所以就会出现初始化文档时的动画变换。解决方案第一个就如同上面所说，把css放进html中的style中，便能正确按照顺序进行加载，从而不会导致尴尬的动画变换第二种方法，给body加上一个类，比如说叫做preLoad,那么就是如下 ... 然后在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:是在玩动态名片的时候发现的坑，目前已经完善了：动态卡片