Open lulujianglab opened 5 years ago
在开发中实现动画的方法有很多,不管是 react 还是 vue 都有开源的动画组件库来更加方便的动画实现效果
react
vue
react 动画组件库是 React-Transition-group,在说这个组件库之前,我们先来看下借助 CSS3 实现最基本的动画样式
React-Transition-group
constructor(props) { super(props) this.state = { show: true } this.handleToggle = this.handleToggle.bind(this) } render() { return ( <Fragment> <div className={this.state.show ? 'show' : 'hide'}>hello</div> <button onClick={this.handleToggle}>toggle</button> </Fragment> ); } handleToggle() { this.setState({ show: this.state.show ? false : true }) }
.show { opacity: 1; transition: all 1s ease-in; } .hide { opacity: 0; transition: all 1s ease-in; }
这样在浏览器中通过控制 toggle,就可以看到 hello 若隐若现了,就借助了 CSS3 实现了最基本的动画样式
在 github 中搜索 react-transition-group ,可以看到 star 最多的项目,就是 react-transition-group
react-transition-group
先安装依赖 npm install react-transition-group --save
npm install react-transition-group --save
然后在项目中引入 import { CSSTransition } from 'react-transition-group'
import { CSSTransition } from 'react-transition-group'
可以看到官网的demo
classNames="fade" applies fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, fade-exit-done, fade-appear, and fade-appear-active.
classNames="fade" applies fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, fade-exit-done, fade-appear, and fade-appear-active
过渡组件 ( Transiton ) 允许您用一个简单的声明性 API 描述随着时间的推移从一个组件状态到另一个组件状态的转换
Transiton
默认展示组件某个特定状态的样式,而不是创建渐变动画
<Transition in={this.state.show} timeout={1000} // unmountOnExit > {state=>{ if(state === 'entering' || state === 'entered') return <div className="on">{state}</div> else return <div className="off">{state}</div> }} </Transition> <button onClick={this.handleAddItem}>toggle {`${this.state.show}`}</button>
Transition 中间传入一个函数,也就是属性 children ,并获得一个参数 state,
Transition
state 包含了内部组件的 transition 状态,分别有
transition
entering
entered
exiting
exited
unmounted
上述 🌰 的意思可以理解为
你设置的时间是 1000ms,当 in 从 false 变成 true 的时候, 显示 <div className="on">{state}</div>( entering 和 entered 的状态 ), 相反的,当 in 从 true 变成 false 的时候,1000ms 之后, 切换到 <div className="off">{state}</div>( exiting 和 exited 的状态 )
<div className="on">{state}</div>
<div className="off">{state}</div>
从头来看,它其实就是一个状态机,跟动画没什么关系,所以它的名字也是叫 Transition
有点像路由,在不同的组件中选择一个渲染,唯一的区别是,它只有4个路由选项:
进入 ( in === true )时,url 是 entering,1000ms 后,url 变成 entered
退出 ( in ===false ) 时,url 是 exiting,1000ms 后,url 变成 exited
然后加上 css ease-in-out 就成了动画
ease-in-out
展示组件从状态到另一个状态的动态变化,需要定义 className 和相关样式
最常用的是用来动画一个组件的安装和卸载,但也可以用来描述在适当的过渡状态
可以将我们之前用 CSS3 写的样式修改为
render() { return ( <Fragment> <CSSTransition in={this.state.show} timeout={1000} // 前缀名注意S classNames='fade' > <div>hello</div> </CSSTransition> <button onClick={this.handleToggle}>toggle</button> </Fragment> ) } handleToggle() { this.setState({ show: this.state.show ? false : true }) }
.fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; transition: opacity 1s ease-in; } /* 入场动画执行完毕后,保持状态 */ .fade-enter-done { opacity: 1; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 1s ease-in; } .fade-exit-done { opacity: 0; }
这样就可以实现和之前相同的动画效果了
咋一看虽然稍微复杂了点,但是它可以带给我们很多新的特效
比如参数 in 是 true or false,代表了是’淡入’状态,还是’淡出’状态
in
true
false
timeout 代表了整个的持续时间
timeout
unmountOnExit 属性,添加到代码中,会发现当我们点隐藏的时候,对应的 DOM 被移出了,点显示的时候,DOM 又出来了
unmountOnExit
借助 react-transition-group 这个库,实现起来非常简单
继续看它的文档,这个库提供了很多钩子函数
假设当这个 hello 显示出来之后,希望它的颜色能变成红色,现在实现就变得很简单了
只需要在入场动画结束之后,将 color 变成 red
.fade-enter-done { opacity: 1; color: red }
还可以用 js 的方式来实现,怎么做呢?
在 CSSTransition 组件中添加一个钩子onEntered
CSSTransition
onEntered
<CSSTransition in={this.state.show} timeout={1000} classNames='fade' unmountOnExit onEntered={(el) => {el.style.color='blue'}} > <div>hello</div> </CSSTransition>
钩子和生命周期函数是一个东西,就是在某个时刻会自动执行的函数
onEntered 钩子什么时候会自动执行呢?就是当入场动画结束之后,就会被执行
el 就是指的内部的 div 元素
el
div
如果希望第一次展示的时候也有动画效果,应该怎么办呢?
同样也需要在 CSSTransition 组件中添加一个 appear={true} ,同时在入场动画的第一帧添加 fade-appear ,同时在入场动画的第二帧以及整个过程中添加 fade-appear-active
appear={true}
fade-appear
fade-appear-active
/* enter是入场前的刹那(点击按钮),appear指页面第一次加载前的一刹那(自动) */ .fade-enter, .fade-appear { opacity: 0; } /* enter-active指入场后到入场结束的过程,appear-active则是页面第一次加载自动执行 */ .fade-enter-active, .fade-appear-active { opacity: 1; transition: opacity 1s ease-in; }
这些也就是 react-transition-group 这个库比较核心的内容,其他更复杂的方法可以查阅 Transition
如果要做多个元素的动画切换呢?
这个时候就要用到 TransitionGroup
TransitionGroup 实际上就是实现多个Transition 或者CSSTransition组合的效果
TransitionGroup
用来管理一些列组件的动画,例如列表
首先引入这个组件 import TransitionGroup from 'react-transition-group'
import TransitionGroup from 'react-transition-group'
constructor(props) { super(props) this.state = { data: [] } this.handleAddItem = this.handleAddItem.bind(this) } render() { return ( <Fragment> <TransitionGroup> { this.state.data.map((item, index) => { return ( <CSSTransition timeout={1000} classNames='fade' unmountOnExit onEntered={(el) => {el.style.color='blue'}} appear={true} key={index} > <div>{item}</div> </CSSTransition> ) }) } </TransitionGroup> <button onClick={this.handleAddItem}>toggle</button> </Fragment> ) } handleAddItem() { this.setState((prevState) => { return { data: [...prevState.data, 'item'] } }) }
这样配合 TransitionGroup 和 CSSTransition 就可以进行多个元素或者组件切换这样的动画效果了
transition 动画
在开发中实现动画的方法有很多,不管是
react
还是vue
都有开源的动画组件库来更加方便的动画实现效果react 动画组件库是
React-Transition-group
,在说这个组件库之前,我们先来看下借助 CSS3 实现最基本的动画样式CSS3 实现动画样式
这样在浏览器中通过控制 toggle,就可以看到 hello 若隐若现了,就借助了 CSS3 实现了最基本的动画样式
使用 react-transition-group 实现动画
在 github 中搜索
react-transition-group
,可以看到 star 最多的项目,就是 react-transition-group先安装依赖
npm install react-transition-group --save
然后在项目中引入
import { CSSTransition } from 'react-transition-group'
可以看到官网的demo
Transition
过渡组件 (
Transiton
) 允许您用一个简单的声明性 API 描述随着时间的推移从一个组件状态到另一个组件状态的转换默认展示组件某个特定状态的样式,而不是创建渐变动画
Transition
中间传入一个函数,也就是属性 children ,并获得一个参数 state,state 包含了内部组件的
transition
状态,分别有entering
entered
exiting
exited
unmounted
上述 🌰 的意思可以理解为
你设置的时间是 1000ms,当 in 从 false 变成 true 的时候, 显示
<div className="on">{state}</div>
(entering
和entered
的状态 ), 相反的,当 in 从 true 变成 false 的时候,1000ms 之后, 切换到<div className="off">{state}</div>
(exiting
和exited
的状态 )运行原理
从头来看,它其实就是一个状态机,跟动画没什么关系,所以它的名字也是叫
Transition
有点像路由,在不同的组件中选择一个渲染,唯一的区别是,它只有4个路由选项:
进入 ( in === true )时,url 是
entering
,1000ms 后,url 变成entered
退出 ( in ===false ) 时,url 是
exiting
,1000ms 后,url 变成exited
然后加上 css
ease-in-out
就成了动画CSSTransition
展示组件从状态到另一个状态的动态变化,需要定义 className 和相关样式
最常用的是用来动画一个组件的安装和卸载,但也可以用来描述在适当的过渡状态
可以将我们之前用 CSS3 写的样式修改为
这样就可以实现和之前相同的动画效果了
咋一看虽然稍微复杂了点,但是它可以带给我们很多新的特效
比如参数
in
是true
orfalse
,代表了是’淡入’状态,还是’淡出’状态timeout
代表了整个的持续时间unmountOnExit
属性,添加到代码中,会发现当我们点隐藏的时候,对应的 DOM 被移出了,点显示的时候,DOM 又出来了借助
react-transition-group
这个库,实现起来非常简单继续看它的文档,这个库提供了很多钩子函数
假设当这个 hello 显示出来之后,希望它的颜色能变成红色,现在实现就变得很简单了
只需要在入场动画结束之后,将 color 变成 red
还可以用 js 的方式来实现,怎么做呢?
在
CSSTransition
组件中添加一个钩子onEntered
钩子和生命周期函数是一个东西,就是在某个时刻会自动执行的函数
onEntered
钩子什么时候会自动执行呢?就是当入场动画结束之后,就会被执行el
就是指的内部的div
元素如果希望第一次展示的时候也有动画效果,应该怎么办呢?
同样也需要在
CSSTransition
组件中添加一个appear={true}
,同时在入场动画的第一帧添加fade-appear
,同时在入场动画的第二帧以及整个过程中添加fade-appear-active
这些也就是
react-transition-group
这个库比较核心的内容,其他更复杂的方法可以查阅 TransitionTransitionGroup
如果要做多个元素的动画切换呢?
这个时候就要用到 TransitionGroup
TransitionGroup
实际上就是实现多个Transition 或者CSSTransition组合的效果用来管理一些列组件的动画,例如列表
首先引入这个组件
import TransitionGroup from 'react-transition-group'
这样配合
TransitionGroup
和CSSTransition
就可以进行多个元素或者组件切换这样的动画效果了完整代码
transition 动画