[游戏开发]react react-transition-group2

这次用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标签包裹在需要实现动画效果的元素外，然后进行相关属性的配置：

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 包装到一个模块文件中再默认导出，在其他地方引用该新模块：
// 自己项目中的AnimatedRouter模块

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

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(


,
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 页面后退时动画效果
同时，如果没有设置componnt={null}的话，AnimateRouter 将会渲染一个路由页面容器节点，该节点会有一些 className，可以用来辅助做动画定义。
容器节点 className 解释
animated-router-container 总是存在
animated-router-in-transition 路由动画进行中时存在，可以用来设置动画切换中的一些节点样式设置