React中的样式和动画

·  阅读 3532
React中的样式和动画

React中的样式和动画

CSS 概述(理解)

1.组件化天下的CSS

  • 前面说过,整个前端已经是组件化的天下:
    • CSS的设计就不是为组件化而生的
    • 所以在目前组件化的框架中都在需要一种合适的CSS解决方案
  • 在组件化中选择合适的CSS解决方案应该符合以下条件:
    • 可以编写局部csscss具备自己的局部作用域,不会随意污染其他组件内的元素
    • 可以编写动态的css:可以获取当前组件的一些状态,根据状态的变化生成不同的css样式
    • 支持所有的css特性:伪类、动画、媒体查询等
    • 编写起来简洁方便、最好符合一贯的css风格特点

2.浅谈React中的CSS

  • 事实上,css一直是React的痛点,也是被很多开发者吐槽、诟病的一个点

  • 在这一点上,Vue做的要确实要好于React

    • Vue通过在.vue文件中编写 <style><style> 标签来编写自己的样式
    • 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效
    • 通过 lang 属性来设置你喜欢的less、sass等预处理器
    • 通过内联样式风格的方式来根据最新状态设置和改变css
  • VueCSS上虽然不能称之为完美,但是已经足够简洁、自然、方便了,至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

  • 相比而言,React官方并没有给出在React中统一的样式风格

    • 由此,从普通的css,到css modules,再到css in js,有几十种不同的解决方案,上百个不同的库
    • 大家一致在寻找最好的或者说最适合自己的CSS方案,但是到目前为止也没有统一的方案

React中的样式

1.内联样式

  • 内联样式是官方推荐的一种css样式的写法:

    • style接受一个采用小驼峰命名属性的 JavaScript 对象,,而不是 CSS 字符串;
    • 并且可以引用state中的状态来设置相关的样式;
  • 内联样式的优点:

    1. 内联样式, 样式之间不会有冲突

    2. 可以动态获取当前state中的状态

  • 内联样式的缺点

    • 1.写法上都需要使用驼峰标识

    • 2.某些样式没有提示

    • 3.大量的样式, 代码混乱

    • 4.某些样式无法编写(比如伪类/伪元素)

  • 所以官方依然是希望内联合适和普通的css来结合编写

2.普通的css

  • 普通的css我们通常会编写到一个单独的文件,之后再进行引入

  • 这样的编写方式和普通的网页开发中编写方式是一致的:

    • 如果我们按照普通的网页标准去编写,那么也不会有太大的问题
    • 但是组件化开发中我们总是希望组件是一个独立的模块,即便是样式也只是在自己内部生效,不会相互影响
    • 但是普通的css都属于全局的css,样式之间会相互影响
  • 这种编写方式最大的问题是样式之间会相互层叠掉

3.css modules

  • css modules并不是React特有的解决方案,而是所有使用了类似于webpack配置的环境下都可以使用的

  • 如果在其他项目中使用, 那么我们需要自己来进行配置,比如配置webpack.config.js中的modules: true

  • React的脚手架已经内置了css modules的配置:

  • .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss

  • 之后就可以引用并且进行使用了

  • css modules确实解决了局部作用域的问题,也是很多人喜欢在React中使用的一种方案

  • 但是这种方案也有自己的缺陷:

    • 引用的类名,不能使用连接符(.home-title),在JavaScript中是不识别的
    • 所有的className都必须使用{style.className} 的形式来编写
    • 不方便动态来修改某些样式,依然需要使用内联样式的方式
    • 如果你觉得上面的缺陷还算OK,那么你在开发中完全可以选择使用css modules来编写,并且也是在React中很受欢迎的一种方式

4.认识 CSS in JS

  • 实际上,官方文档也有提到过CSS in JS这种方案:

    • “CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义
    • 注意此功能并不是 React 的一部分,而是由第三方库提供 React 对样式如何定义并没有明确态度
  • 在传统的前端开发中,我们通常会将结构(HTML)、样式(CSS)、逻辑(JavaScript)进行分离

    • 但是在前面的学习中,我们就提到过,React的思想中认为逻辑本身和UI是无法分离的,所以才会有了JSX的语法
    • 样式呢?样式也是属于UI的一部分
    • 事实上CSS-in-JS的模式就是一种将样式(CSS)也写入到JavaScript中的方式,并且可以方便的使用JavaScript的状态
    • 所以React有被人称之为 All in JS
  • 当然,这种开发的方式也受到了很多的批评:

5.认识styled-components

  • 批评声音虽然有,但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便:

    • CSS-in-JS通过JavaScript来为CSS赋予一些能力,包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修 改状态等等
    • 虽然CSS预处理器也具备某些能力,但是获取动态状态依然是一个不好处理的点
    • 所以,目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案
  • 目前比较流行的CSS-in-JS的库有哪些呢?

    • styled-components
    • emotion
    • glamorous
  • 目前可以说styled-components依然是社区最流行的CSS-in-JS库,所以我们以styled-components的讲解为主

  • 安装yarn add styled-components


styleld-components

1.ES6标签模板字符串

  • 使用模板字符串来调用函数
  • 如果我们在调用的时候插入其他的变量:

    • 模板字符串被拆分了;
    • 第一个元素是数组,是被模块字符串拆分的字符串组合;
    • 后面的元素是一个个模块字符串传入的内容;
  • styled component中,就是通过这种方式来解析模块字符串,最终生成我们想要的样式的

2.styleld-components的安装和插件

  • styled-components的安装
    • yarn add styled
  • styled-components的插件(这里只演示vscode)
    • 安装: 搜索vscode-styled-components首个插件安装即可
    • 作用: 用于编写css的智能提示和语言高亮

3.styled的基本使用

  • styled-components的本质是通过函数的调用最终创建出一个组件

    • 这个组件会被自动添加上一个不重复的 class
    • styled-components会给该class添加相关的样式
  • 另外,它支持类似于CSS预处理器一样的样式嵌套:

    • 支持直接子代选择器后代选择器,并且直接编写样式
    • 可以通过&符号获取当前元素
    • 直接伪类选择器、伪元素

4.props、attrs属性

  • props可以穿透

  • props可以被传递给styled组件
    • 获取props需要通过 ${} 传入一个箭头函数props会作为该函数的参数
    • 这种方式可以有效的解决动态样式的问题
  • 添加 attrs 属性
const JMInput = styled.input.attrs({
  bColor: 'red'// 定义固定属性值
})`
  background-color: purple;
  border-color: ${props => props.bColor};/* 取出attr中定义的bColor */
  color: ${props => props.color}; /* 取出proops传递的color */
`

<JMInput type="password" color={this.state.color} />
复制代码
图示

4.styled高级特性

支持样式的继承

  • 图示
const JMButton = styled.button`
  font-size: 20px;
  padding: 10px 12px;
  margin: 10px;
`
// 继承自 JMButton 的默认样式
const JMButtonPrimary = styled(JMButton)`
  color: lime;
  background-color: pink;
`
复制代码

Theme主题共享

  • 图示
import styled, { ThemeProvider } from 'styled-components'

// 2.使用提供的Theme
const JMButtonPrimary = styled(JMButton)`
  color: ${props => props.theme.color};
`

export default class App extends PureComponent {
  render() {
    return (
	  // 1.提供Theme  
      <ThemeProvider id="app" theme={{ color: 'red', fontSize: '12px' }}>
        <JMButtonPrimary>Primary主要的按钮</JMButtonPrimary>
      </ThemeProvider>
    )
  }
}
复制代码

classnames 库

React中添加class

  • React在JSX给了我们开发者足够多的灵活性,你可以像编写JavaScript代码一样,通过一些逻辑来决定是否添加某些class

  • 这个时候我们可以借助于一个第三方的库:classnames
    • 很明显,这是一个用于动态添加classnames的一个库


React-Transition-Group

react-transition-group介绍

  • 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验

  • 当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group用来完成过渡动画。

    • React曾为开发者提供过动画插件react-addons-css-transition-group,后由社区维护,形成了现在的react-transition-group
    • 这个库可以帮助我们方便的实现组件的 入场 和 离场 动画,使用时需要进行额外的安装:
    • npm i react-transition-group -S
    • yarn add react-transition-group
  • react-transition-group本身非常小,不会为我们应用程序增加过多的负担。

react-transition-group主要组件

react-transition-group主要包含四个组件:

  • Transition
    • 该组件是一个和平台无关的组件(不一定要结合CSS);
    • 在前端开发中,我们一般是结合CSS来完成样式,所以比较常用的是CSSTransition
  • CSSTransition
    • 在前端开发中,通常使用CSSTransition来完成过渡动画效果
  • SwitchTransition
    • 两个组件显示和隐藏切换时,使用该组件
  • TransitionGroup
    • 将多个动画组件包裹在其中,一般用于列表中元素的动画

CSSTransition

  • CSSTransition是基于Transition组件构建的:
    • CSSTransition执行过程中,有三个状态:appear、enter、exit
  • 有三种状态, 需要定义对应的CSS样式:
开始状态执行动画执行结束
-appear-appear-active-appear-done
-enter-enter-active-enter-done
-exit-exit-active-enter-done
  • CSSTransition组件常见对应的属性:
    • in: 触发进入或者退出状态, 根据当前布尔值决定执行动画添加的class
    • intrue时,触发进入状态,会添加-enter、-enter-acitveclass开始执行动画,当动画执行结束后,会移除两个class, 并且添加-enter-doneclass
    • infalse时,触发退出状态,会添加-exit、-exit-activeclass开始执行动画,当动画执行结束后,会移除两个class,并 且添加-enter-doneclass
/* 进入 */
.card-enter,
.card-appear {
  opacity: 0;
  transform: scale(0.6);
}
/* 执行动画 */
.card-enter-active,
.card-appear-active {
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
  transform: scale(1);
}

.card-done,
.card-appear {
}
/* 离开 */
.card-exit {
  opacity: 1;
  transform: scale(1);
}

.card-exit-active {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 300ms, transform 300ms;
}

.card-exit-done {
  opacity: 0;
}

复制代码

CSSTransition组件常见属性

属性名描述
classNames决定了在编写css时,对应的class名称:比如card-enter...
timeout过渡动画的时间,是控制添加class或unmountOnExit的时间
appear是否在首次进入添加动画(需要和in同时为true)对应的calss
unmountOnExit退出后卸载组件,组件元素卸载掉

其他属性可以参考官网来学习

CSSTransition组件常见的钩子函数

钩子函数描述
onEnter在进入动画之前被触发
onEntering在应用进入动画时被触发
onEntered在应用进入动画结束后被触发
onExit开始退出动画触发
onExiting正在退出退出时触发
onExited退出完成触发
下拉查看

SwitchTransition

  • SwitchTransition可以完成两个组件之间切换的炫酷动画:

    • 比如我们有一个按钮需要在on和off之间切换 7
    • 我们希望看到on先从左侧退出,off再从右侧进入
    • 这个动画在 vue 中被称之为 vue transition modes
    • react-transition-group中使用SwitchTransition来实现该动画
  • SwitchTransition中主要有一个属性:mode,有两个值

    • in-out:表示新组件先进入,旧组件再移除
    • out-in:表示就组件先移除,新组件再进入
  • 如何使用SwitchTransition呢?

    • SwitchTransition组件里面要有CSSTransition或者Transition组件,不能直接包裹你想要切换的组件
    • SwitchTransition里面的CSSTransitionTransition组件不再像以前那样接受in属性来判断元素是何种状态,取而代之的是key属性

TransitionGroup

  • 当我们有一组动画时,需要将这些CSSTransition放入到一个TransitionGroup中来完成动画:

最后

如果文章对你有帮助求个👍,最近一直在准备redux系列全面总结,这两天准备再整理整理发布,希望到时候各朋友捧个场

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改