SnowKagura‘s blog - css
type: channel
link: https://www.snowkagura.com/tag/css/
items: 从零开始搭建react开发环境（进阶篇）
items: 关于CSS中transition属性导致页面第一次加载时出现变换动画的解决方案

从零开始搭建react开发环境（进阶篇）
type: item
date: 2022-02-14T18:05:00+08:00
description: [scode type="share"]上篇文章写的有些简略，而且有些地方在实际开发中还是有一定问题存在的，所以就有了这个进阶篇，这篇文章也是因为最近在搞前端开发，所以顺便总结一下[/scode]大纲首先我先说明一下这次使用的技术栈：less css预处理器，知名的还有sass、scss、stylus等react 主要的开发依赖库typescript 提供静态类型等诸多好处webpack 打包工具webpack-dev-server 开发用服务器react-router 路由管理库axios 网络请求库babel es新特性等代码的polyfill以这些作为主要的开发工具和生产依赖，除此之外还有一些关于webpack打包的插件，babel的插件之类的都会在后续进行一一说明步骤首先，我们从新建文件夹开始mkdir my-app \ && cd my-app \ && npm init -y然后我们就开始装依赖了npm install react react-dom react-router-dom axios --save-exact以上是几个生产环境所需要的依赖，所以放在一起进行安装，这里的--save-exact是为了把下载下来的依赖库版本固定，从而避免不同人开发时因为版本更新导致的诸多问题现在我们开始安装开发方面的依赖库，这里要使用一个参数--save-dev，说明这些依赖只在开发时使用npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime @babel/preset-typescript --save-dev \ && npm install webpack webpack-cli webpack-dev-middleware webpack-dev-server webpack-merge --save-dev \ && npm install typescript @types/react @types/react-dom @types/webpack @types/node ts-node --save-dev \ && npm install less less-loader css-loader babel-loader style-loader --save-dev \ && npm install clean-webpack-plugin css-minimizer-webpack-plugin fork-ts-checker-webpack-plugin html-webpack-plugin mini-css-extract-plugin --save-dev这里可以看到，有非常多的开发方面的依赖，在这里我一行一行的进行解释首先第一行，我们可以看到都是关于babel方面的一些库，下面是它们的作用@babel/core babel的核心库@babel/plugin-transform-runtime 和 @babel/runtime 提供对async/await功能的支持@babel/preset-env 提供对ES规范新功能的支持@babel/preset-react 提供对react相关代码规范的支持@babel/preset-typescript 提供对typescript代码的支持babel主要的作用就是为了提供对一些浏览器不支持的语法进行降级转换的作用，使得其可以在浏览器运行然后是第二行，关于webpack的一些功能模块webpack 和 webpack-cli 一个是核心库，一个是命令行支持webpack-dev-middleware 和 webpack-dev-server 对开发环境提供热替换开发服务器功能webpack-merge 用于对配置文件的merge，方便进行配置文件的区分管理（ts原生也可以合并，但是这个比较智能）第三行，关于typescript方面的一些模块声明文件还有typescript自身，这里就不做详细解释了第四行，提供了less支持和一些webpack读取相关文件的相应loader第五行，关于webpack的一些插件clean-webpack-plugin 在打包生成文件时会对之前的文件进行相应的清理操作，主要是为了修复webpack-dev-middleware在启用writeToDisk功能时，webpack原生配置启用自动清理却无法清理的bugcss-minimizer-webpack-plugin 对打包生成的css进行最小化压缩处理fork-ts-checker-webpack-plugin 提供在…

关于CSS中transition属性导致页面第一次加载时出现变换动画的解决方案
type: item
date: 2021-03-31T17:08:00+08:00
description: 今天玩页面设计的时候，无意中发现有这种问题存在在网上也找了解决方案，但是发现，都是用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:是在玩动态名片的时候发现的坑，目前已经完善了：动态卡片