react动画react-transition-group教程实现转场动画附源码下载
日期:2019-05-04
来源:程序思维浏览:3389次
react-transition-group使用教程:
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子,首先我们需要安装react-transition-group,输入:
npm install react-transition-group --save
使用yarn的同学输入 yarn add react-transition-group
组件中引入CSSTransition模块:
import { CSSTransition } from 'react-transition-group'
将CSSTransition标签包裹在需要实现动画效果的元素外,然后进行相关属性的配置:
//jsx
constructor(props){
super(props);
this.state = {
show: true
}
}
render() {
return (
<Fragment>
<CSSTransition
in={this.state.show} // 如果this.state.show从false变为true,则动画入场,反之out出场
timeout={1000} //动画执行1秒
classNames='fade' //自定义的class名
unMountOnExit //可选,当动画出场后在页面上移除包裹的dom节点
onEntered={(el) => {
el.style.color='blue' //可选,动画入场之后的回调,el指被包裹的dom,让div内的字体颜色等于蓝色
}}
onExited={() => {
xxxxx //同理,动画出场之后的回调,也可以在这里来个setState啥的操作
}}
>
<div>hello</div>
</CSSTransition>
<button onClick={this.handleToggole}>toggle</button>
</Fragment>
)
}
handleToggole= ()=> {
this.setState({
show: this.state.show ? false : true
})
}
}
一旦动画入场,插件将会自动的在包裹住的标签上添加很多css样式,默认class名是fade,所以我们需要给CSSTransition标签加上classNames='fade',然后去css文件进行配置:
//enter是入场前的刹那(点击按钮),appear指页面第一次加载前的一刹那(自动)
.fade-enter {
opacity: 0;
}
//enter-active指入场后到入场结束的过程,appear-active则是页面第一次加载自动执行
.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;
}
如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup
import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
list: []
}
this.handleAddItem = this.handleAddItem.bind(this);
}
render() {
return (
<Fragment>
<TransitionGroup>
{
this.state.list.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 {
list: [...prevState.list, 'item']
}
})
}
}
export default App;
react转场动画的效果实现:
react 路由切换动画,支持嵌套路由 (nested routers)和动态路由(dynamic routers)。
官网:https://github.com/qiqiboy/react-animated-router
安装
npm install react-transition-group --save
npm install react-animated-router --save
你可以直接通过npm/yarn安装,依赖包里带一个左右滑入滑出效果的animate.css,如果要使用该效果,需要在项目中一并引入。
import AnimatedRouter from 'react-animated-router'; //导入我们的的AnimatedRouter组件
import 'react-animated-router/animate.css'; //导入默认的切换动画样式,如果需要其它切换样式,可以导入自己的动画样式定义文件
如果想要自定义切换效果,可以将animate.css复制进自己的项目,并修改其中的动画样式定义(基于 css3 transition),并引入到项目中。
小技巧
如果路由在多个页面文件中都有定义,为了避免每次都需要同时导入 react-animated-router 和 animate.css(如果只有一处引入 animate.css,其它地方不引入的话,在有 code split 的项目中,可能会有样式丢失),有两种办法可以优化:
import 'react-animated-router/animate.css'; //导入样式文件
export { default } from 'react-animated-router'; //直接将react-animated-route作为默认导出
然后就可以直接引用该文件来使用 AnimatedRouter 了,不必每次都引入animate.css。
如何使用
AnimatedRouter是一个标准的 React 组件,类似react-router中的Switch,将它放入你的项目中,然后在需要支持动画的地方,使用AnimatedRouter替换你的Switch组件即可。
例如,可以对父级路由使用 AnimatedRouter 时定义使用父级路由 path 当作 key: transitionKey={this.props.location.pathname.split('/').slice(0, 2).join('/')}
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Route, Redirect, Switch, BrowserRouter } from 'react-router-dom';
import AnimatedRouter from 'react-animated-router'; //导入我们的的AnimatedRouter组件
import 'react-animated-router/animate.css'; //导入默认的切换动画样式,如果需要其它切换样式,可以导入自己的动画样式定义文件
import Login from 'modules/Login';
import Signup from 'modules/Signup';
class App extends Component {
render() {
/** 假如你的代码如此,则可直接使用最下方代码代替,即直接使用 AnimatedRouter 替换掉Switch
* return (
* <Switch>
* <Route path="/login"` component={Login} />
* <Route path="/signup" component={Signup} />
* <Redirect to="/login" />
* </Switch>
* );
**/
return (
<AnimatedRouter>
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Redirect to="/login" />
</AnimatedRouter>
);
}
}
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector('#root')
);
自定义动画
如果不希望使用左右滑入动画,则可以自定义自己的路由动画。可以将默认的 animate.scss(css) 复制进自己的项目,然后修改不同阶段的样式值即可。
页面分为前进(forward)和后退(backward),两者分别会应用不同的 classNames 到react-transition-group的CSSTransition组件。关于 classNames 的更多用法,请参考官方文档。
默认的 classNames 如下,如果你设置了 prefix,则名称会变为 {prefix}-forward / {prefix}-backward。
同时,如果没有设置componnt={null}的话,AnimateRouter 将会渲染一个路由页面容器节点,该节点会有一些 className,可以用来辅助做动画定义。
FAQ
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子,首先我们需要安装react-transition-group,输入:
npm install react-transition-group --save
使用yarn的同学输入 yarn add react-transition-group
组件中引入CSSTransition模块:
import { CSSTransition } from 'react-transition-group'
将CSSTransition标签包裹在需要实现动画效果的元素外,然后进行相关属性的配置:
//jsx
constructor(props){
super(props);
this.state = {
show: true
}
}
render() {
return (
<Fragment>
<CSSTransition
in={this.state.show} // 如果this.state.show从false变为true,则动画入场,反之out出场
timeout={1000} //动画执行1秒
classNames='fade' //自定义的class名
unMountOnExit //可选,当动画出场后在页面上移除包裹的dom节点
onEntered={(el) => {
el.style.color='blue' //可选,动画入场之后的回调,el指被包裹的dom,让div内的字体颜色等于蓝色
}}
onExited={() => {
xxxxx //同理,动画出场之后的回调,也可以在这里来个setState啥的操作
}}
>
<div>hello</div>
</CSSTransition>
<button onClick={this.handleToggole}>toggle</button>
</Fragment>
)
}
handleToggole= ()=> {
this.setState({
show: this.state.show ? false : true
})
}
}
一旦动画入场,插件将会自动的在包裹住的标签上添加很多css样式,默认class名是fade,所以我们需要给CSSTransition标签加上classNames='fade',然后去css文件进行配置:
//enter是入场前的刹那(点击按钮),appear指页面第一次加载前的一刹那(自动)
.fade-enter {
opacity: 0;
}
//enter-active指入场后到入场结束的过程,appear-active则是页面第一次加载自动执行
.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;
}
如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup
import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
list: []
}
this.handleAddItem = this.handleAddItem.bind(this);
}
render() {
return (
<Fragment>
<TransitionGroup>
{
this.state.list.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 {
list: [...prevState.list, 'item']
}
})
}
}
export default App;
react转场动画的效果实现:
react 路由切换动画,支持嵌套路由 (nested routers)和动态路由(dynamic routers)。
官网:https://github.com/qiqiboy/react-animated-router
安装
npm install react-transition-group --save
npm install react-animated-router --save
你可以直接通过npm/yarn安装,依赖包里带一个左右滑入滑出效果的animate.css,如果要使用该效果,需要在项目中一并引入。
import AnimatedRouter from 'react-animated-router'; //导入我们的的AnimatedRouter组件
import 'react-animated-router/animate.css'; //导入默认的切换动画样式,如果需要其它切换样式,可以导入自己的动画样式定义文件
如果想要自定义切换效果,可以将animate.css复制进自己的项目,并修改其中的动画样式定义(基于 css3 transition),并引入到项目中。
小技巧
如果路由在多个页面文件中都有定义,为了避免每次都需要同时导入 react-animated-router 和 animate.css(如果只有一处引入 animate.css,其它地方不引入的话,在有 code split 的项目中,可能会有样式丢失),有两种办法可以优化:
- 一,将animate.css在入口文件中引入,其它地方可以只引用 react-animated-router
- 二,将 react-animated-router 和 animate.css 包装到一个模块文件中再默认导出,在其他地方引用该新模块:
import 'react-animated-router/animate.css'; //导入样式文件
export { default } from 'react-animated-router'; //直接将react-animated-route作为默认导出
然后就可以直接引用该文件来使用 AnimatedRouter 了,不必每次都引入animate.css。
如何使用
AnimatedRouter是一个标准的 React 组件,类似react-router中的Switch,将它放入你的项目中,然后在需要支持动画的地方,使用AnimatedRouter替换你的Switch组件即可。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
prefix | 字符串,可选 | animated-router | 应用到 CSSTransition 组件的 classNames 前缀。如果要在同一个项目中使用不同的动画,可以通过设置前缀来定义不同的动画。关于如何自定义动画,请查看下方说明 |
timeout | 数字,可选 | 无 | 动画持续时间(毫秒),可以不传,默认为监听 transitionend 时间来判断动画结束。如果有动画异常,可以尝试设置该值,需要注意的是,该值应该与动画样式中定义的过渡时间一致 |
className | 字符串,可选 | 无 | 如果传入 className 则会添加到动画节点所在容器节点上 |
transitionKey | 字符串,可选 | 无 | 即每个页面节点需要的 key 值,如果不传则会使用当前页面地址的 pathname。 该属性可以用于处理路由页面中还有子路由时的情况,用来避免子路由切换会导致父级页面也一块被重载。 |
component | 布尔,可选 | 'div' | AnimatedRouter 默认会 render 一个 div 节点,你可以通过该字段修改 render 的节点类型,例如,component="section"将会 render <section>节点。在 react v16+中,可以传入 null 来避免渲染该节点。 |
appear | 布尔,可选 | false | 文档:appear:是否启用组件首次挂载动画(启用的话将会触发 enter 进场动画) |
enter | 布尔,可选 | true | 文档:enter:是否启用进场动画 |
exit | 布尔,可选 | true | 文档:exit:是否启用离场动画 |
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Route, Redirect, Switch, BrowserRouter } from 'react-router-dom';
import AnimatedRouter from 'react-animated-router'; //导入我们的的AnimatedRouter组件
import 'react-animated-router/animate.css'; //导入默认的切换动画样式,如果需要其它切换样式,可以导入自己的动画样式定义文件
import Login from 'modules/Login';
import Signup from 'modules/Signup';
class App extends Component {
render() {
/** 假如你的代码如此,则可直接使用最下方代码代替,即直接使用 AnimatedRouter 替换掉Switch
* return (
* <Switch>
* <Route path="/login"` component={Login} />
* <Route path="/signup" component={Signup} />
* <Redirect to="/login" />
* </Switch>
* );
**/
return (
<AnimatedRouter>
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Redirect to="/login" />
</AnimatedRouter>
);
}
}
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector('#root')
);
自定义动画
如果不希望使用左右滑入动画,则可以自定义自己的路由动画。可以将默认的 animate.scss(css) 复制进自己的项目,然后修改不同阶段的样式值即可。
页面分为前进(forward)和后退(backward),两者分别会应用不同的 classNames 到react-transition-group的CSSTransition组件。关于 classNames 的更多用法,请参考官方文档。
默认的 classNames 如下,如果你设置了 prefix,则名称会变为 {prefix}-forward / {prefix}-backward。
classNames | 解释 |
---|---|
animated-router-forward | 页面前进时动画效果 |
animated-router-backward | 页面后退时动画效果 |
容器节点 className | 解释 |
---|---|
animated-router-container | 总是存在 |
animated-router-in-transition | 路由动画进行中时存在,可以用来设置动画切换中的一些节点样式设置 |
- Q: 动画执行异常? A: 可以尝试设置 timeout 属性,并保持与动画样式中定义的过渡时间一致(默认的 animate.scss 中为 300)
精品好课