关于react.js:React中的样式和动画

CSS 概述(了解)

1. 组件化天下的 CSS

• 后面说过，整个前端曾经是组件化的天下:

  • 而 CSS 的设计就不是为组件化而生的
  • 所以在目前组件化的框架中都在须要一种适合的 CSS 解决方案

• 在组件化中抉择适合的 CSS 解决方案应该合乎以下条件：

  • 能够编写部分 css：css 具备本人的部分作用域，不会随便净化其余组件内的元素
  • 能够编写动静的 css：能够获取以后组件的一些状态，依据状态的变动生成不同的css 款式
  • 反对所有的 css 个性：伪类、动画、媒体查问等
  • 编写起来简洁不便、最好合乎一贯的 css 格调特点

2. 浅谈 React 中的 CSS

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

• 在这一点上，Vue做的要的确要好于React：

  • Vue通过在 .vue 文件中编写 <style><style> 标签来编写本人的款式
  • 通过是否增加 scoped 属性来决定编写的款式是全局无效还是部分无效
  • 通过 lang 属性来设置你喜爱的 less、sass 等预处理器
  • 通过内联款式格调的形式来依据最新状态设置和扭转css
• Vue在 CSS 上尽管不能称之为完满，然而曾经足够简洁、天然、不便了，至多对立的款式格调不会呈现多个开发人员、多个我的项目采纳不一样的款式格调。

• 相比而言，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

• 当然，这种开发的形式也受到了很多的批评：

  • Stop using CSS in JavaScript for web development

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} />

<details>
<summary>图示</summary>

</details>

​

4.styled 高级个性

反对款式的继承

• <details>
  <summary>图示</summary>
  
  </details>

const JMButton = styled.button`
  font-size: 20px;
  padding: 10px 12px;
  margin: 10px;
`
// 继承自 JMButton 的默认款式
const JMButtonPrimary = styled(JMButton)`
  color: lime;
  background-color: pink;
`

Theme 主题共享

• <details>
  <summary>图示</summary>
  
  </details>

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 款式:

• CSSTransition组件常见对应的属性:

  • in: 触发进入或者退出状态, 依据以后 布尔值 决定执行动画增加的class
  • in为 true 时，触发进入状态，会增加 -enter、-enter-acitve 的class开始执行动画，当动画执行完结后，会移除两个 class，并且增加-enter-done 的class
  • 当 in 为false时，触发退出状态，会增加 -exit、-exit-active 的class开始执行动画，当动画执行完结后，会移除两个 class，并 且增加-enter-done 的class

/* 进入 */
.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 组件常见属性

[其余属性能够参考官网来学习](https://reactcommunity.org/re…
)

CSSTransition 组件常见的钩子函数

<details>
<summary>下拉查看</summary>

</details>

SwitchTransition

• SwitchTransition能够实现两个组件之间切换的炫酷动画：

  • 比方咱们有一个按钮须要在 on 和 off 之间切换
  • 咱们心愿看到 on 先从左侧退出，off 再从右侧进入
  • 这个动画在 vue 中被称之为 vue transition modes
  • react-transition-group中应用 SwitchTransition 来实现该动画

• SwitchTransition中次要有一个属性：mode，有两个值

  • in-out：示意新组件先进入，旧组件再移除
  • out-in：示意就组件先移除，新组件再进入

• 如何应用 SwitchTransition 呢？

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

TransitionGroup

• 当咱们有 一组动画 时，须要将这些 CSSTransition 放入到一个 TransitionGroup 中来实现动画：

最初

如果文章对你有帮忙求个👍，最近始终在筹备 redux 系列全面总结，这两天筹备再整顿整顿公布，心愿到时候各敌人捧个场

CSS 概述(了解)

1. 组件化天下的 CSS

• 后面说过，整个前端曾经是组件化的天下:

  • 而 CSS 的设计就不是为组件化而生的
  • 所以在目前组件化的框架中都在须要一种适合的 CSS 解决方案

• 在组件化中抉择适合的 CSS 解决方案应该合乎以下条件：

  • 能够编写部分 css：css 具备本人的部分作用域，不会随便净化其余组件内的元素
  • 能够编写动静的 css：能够获取以后组件的一些状态，依据状态的变动生成不同的css 款式
  • 反对所有的 css 个性：伪类、动画、媒体查问等
  • 编写起来简洁不便、最好合乎一贯的 css 格调特点

2. 浅谈 React 中的 CSS

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

• 在这一点上，Vue做的要的确要好于React：

  • Vue通过在 .vue 文件中编写 <style><style> 标签来编写本人的款式
  • 通过是否增加 scoped 属性来决定编写的款式是全局无效还是部分无效
  • 通过 lang 属性来设置你喜爱的 less、sass 等预处理器
  • 通过内联款式格调的形式来依据最新状态设置和扭转css
• Vue在 CSS 上尽管不能称之为完满，然而曾经足够简洁、天然、不便了，至多对立的款式格调不会呈现多个开发人员、多个我的项目采纳不一样的款式格调。

• 相比而言，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

• 当然，这种开发的形式也受到了很多的批评：

  • Stop using CSS in JavaScript for web development

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
  • in为 true 时，触发进入状态，会增加 -enter、-enter-acitve 的class开始执行动画，当动画执行完结后，会移除两个 class，并且增加-enter-done 的class
  • 当 in 为false时，触发退出状态，会增加 -exit、-exit-active 的class开始执行动画，当动画执行完结后，会移除两个 class，并 且增加-enter-done 的class

/ 进入 /
.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 之间切换
  • 咱们心愿看到 on 先从左侧退出，off 再从右侧进入
  • 这个动画在 vue 中被称之为 vue transition modes
  • react-transition-group中应用 SwitchTransition 来实现该动画

• SwitchTransition中次要有一个属性：mode，有两个值

  • in-out：示意新组件先进入，旧组件再移除
  • out-in：示意就组件先移除，新组件再进入

• 如何应用 SwitchTransition 呢？

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

TransitionGroup

• 当咱们有 一组动画 时，须要将这些 CSSTransition 放入到一个 TransitionGroup 中来实现动画：

最初

如果文章对你有帮忙求个👍，最近始终在筹备 redux 系列全面总结，这两天筹备再整顿整顿公布，心愿到时候各敌人捧个场