React 简易学习（四、动画）

1.打开github，找到react-transition-group信息

2.安装

    打开命令提示符，输入：

        npm install react-transition-group --save

3.在渲染文件中的操作

    在渲染文件中，首先引入包

        import { CSSTransition } from 'react-transition-group';

    然后编写代码

        <TestCss>
          <CSSTransition
            classNames="slide"  //此处自定义class名称，在样式文件中会调用
            in={focused}  //此处为动画执行条件
            timeout={200}  //此处为动画执行时间
          >
           <div>//标签只能包含当前一个元素</div>
          </CSSTransition>
     </TestCss>

4.在样式文件中的操作

    在渲染文件中，首先引入包

        import { styled } from 'react-transition-group';

    然后，在代码中编写

        export const TestCss = styled.div`
          .slide-ender{
            opacity:0;
            transition:all .2s ease-out;
          }
          .slide-enter-active{
            opacity:1;
          }
          .slide-exit{
            opacity:1;
            transition:all .2s ease-out;
          }
          .slide-exit-active{
            opacity:0;
          }
        `;