面试官：在React中组件间过渡动画如何实现？

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了沙县免费建站欢迎大家使用！

一、是什么

在日常开发中，页面切换时的转场动画是比较基础的一个场景

当一个组件在显示与消失过程中存在过渡动画，可以很好的增加用户的体验

在react中实现过渡动画效果会有很多种选择，如react-transition-group，react-motion，Animated，以及原生的CSS都能完成切换动画

二、如何实现

在react中，react-transition-group是一种很好的解决方案，其为元素添加enter，enter-active，exit，exit-active这一系列勾子

可以帮助我们方便的实现组件的入场和离场动画

其主要提供了三个主要的组件：

  • CSSTransition：在前端开发中，结合 CSS 来完成过渡动画效果
  • SwitchTransition：两个组件显示和隐藏切换时，使用该组件
  • TransitionGroup：将多个动画组件包裹在其中，一般用于列表中元素的动画

CSSTransition

其实现动画的原理在于，当CSSTransition的in属性置为true时，CSSTransition首先会给其子组件加上xxx-enter、xxx-enter-active的class执行动画

当动画执行结束后，会移除两个class，并且添加-enter-done的class

所以可以利用这一点，通过css的transition属性，让元素在两个状态之间平滑过渡，从而得到相应的动画效果

当in属性置为false时，CSSTransition会给子组件加上xxx-exit和xxx-exit-active的class，然后开始执行动画，当动画结束后，移除两个class，然后添加-enter-done的class

如下例子：

 
 
 
 
      
  
  
  
  1. export default class App2 extends React.PureComponent { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   state = {show: true}; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.   onToggle = () => this.setState({show: !this.state.show}); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.   render() { 
    8.   
  
  
  
  8.     const {show} = this.state; 
    9.   
  
  
  
  9.     return ( 
    10.   
  
  
  
  10.        
    11.   
  
  
  
  11.          
    12.   
  
  
  
  12.             
  
  
  
  13.             in={show} 
    14.   
  
  
  
  14.             timeout={500} 
    15.   
  
  
  
  15.             classNames={'fade'} 
    16.   
  
  
  
  16.             unmountOnExit={true} 
    17.   
  
  
  
  17.           > 
    18.   
  
  
  
  18.              
    19.   
  
  
  
  19.            
    20.   
  
  
  
  20.         
 
  •         toggle 
  •       
    •  
  •     ); 
  •   } 
  • } 

    • 对应css样式如下：

      
 
 
 
         
  
  
  
    1. .fade-enter { 
      2.    
  
  
  
    2.   opacity: 0; 
      3.    
  
  
  
    3.   transform: translateX(100%); 
      4.    
  
  
  
    4. } 
      5.    
  
  
  
    5.  
      6.    
  
  
  
    6. .fade-enter-active { 
      7.    
  
  
  
    7.   opacity: 1; 
      8.    
  
  
  
    8.   transform: translateX(0); 
      9.    
  
  
  
    9.   transition: all 500ms; 
      10.    
  
  
  
    10. } 
      11.    
  
  
  
    11.  
      12.    
  
  
  
    12. .fade-exit { 
      13.    
  
  
  
    13.   opacity: 1; 
      14.    
  
  
  
    14.   transform: translateX(0); 
      15.    
  
  
  
    15. } 
      16.    
  
  
  
    16.  
      17.    
  
  
  
    17. .fade-exit-active { 
      18.    
  
  
  
    18.   opacity: 0; 
      19.    
  
  
  
    19.   transform: translateX(-100%); 
      20.    
  
  
  
    20.   transition: all 500ms; 
      21.    
  
  
  
    21. } 
      22.

    SwitchTransition

    SwitchTransition可以完成两个组件之间切换的炫酷动画

    比如有一个按钮需要在on和off之间切换，我们希望看到on先从左侧退出，off再从右侧进入

    SwitchTransition中主要有一个属性mode，对应两个值：

    SwitchTransition组件里面要有CSSTransition，不能直接包裹你想要切换的组件

    里面的CSSTransition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性

    下面给出一个按钮入场和出场的示例，如下：

      
 
 
 
         
  
  
  
    1. import { SwitchTransition, CSSTransition } from "react-transition-group"; 
      2.    
  
  
  
    2.  
      3.    
  
  
  
    3. export default class SwitchAnimation extends PureComponent { 
      4.    
  
  
  
    4.   constructor(props) { 
      5.    
  
  
  
    5.     super(props); 
      6.    
  
  
  
    6.  
      7.    
  
  
  
    7.     this.state = { 
      8.    
  
  
  
    8.       isOn: true 
      9.    
  
  
  
    9.     } 
      10.    
  
  
  
    10.   } 
      11.    
  
  
  
    11.  
      12.    
  
  
  
    12.   render() { 
      13.    
  
  
  
    13.     const {isOn} = this.state; 
      14.    
  
  
  
    14.  
      15.    
  
  
  
    15.     return ( 
      16.    
  
  
  
    16.        
      17.    
  
  
  
    17.            
  
  
  
    18.                        timeout={500} 
      19.    
  
  
  
    19.                        key={isOn ? "on" : "off"}> 
      20.    
  
  
  
    20.           { 
      21.    
  
  
  
    21.            
      22.    
  
  
  
    22.             {isOn ? "on": "off"} 
      23.    
  
  
  
    23.            
      24.    
  
  
  
    24.         } 
      25.    
  
  
  
    25.          
      26.    
  
  
  
    26.        
      27.    
  
  
  
    27.     ) 
      28.    
  
  
  
    28.   } 
      29.    
  
  
  
    29.  
      30.    
  
  
  
    30.   btnClick() { 
      31.    
  
  
  
    31.     this.setState({isOn: !this.state.isOn}) 
      32.    
  
  
  
    32.   } 
      33.    
  
  
  
    33. } 
      34.

    css文件对应如下：

      
 
 
 
         
  
  
  
    1. .btn-enter { 
      2.    
  
  
  
    2.   transform: translate(100%, 0); 
      3.    
  
  
  
    3.   opacity: 0; 
      4.    
  
  
  
    4. } 
      5.    
  
  
  
    5.  
      6.    
  
  
  
    6. .btn-enter-active { 
      7.    
  
  
  
    7.   transform: translate(0, 0); 
      8.    
  
  
  
    8.   opacity: 1; 
      9.    
  
  
  
    9.   transition: all 500ms; 
      10.    
  
  
  
    10. } 
      11.    
  
  
  
    11.  
      12.    
  
  
  
    12. .btn-exit { 
      13.    
  
  
  
    13.   transform: translate(0, 0); 
      14.    
  
  
  
    14.   opacity: 1; 
      15.    
  
  
  
    15. } 
      16.    
  
  
  
    16.  
      17.    
  
  
  
    17. .btn-exit-active { 
      18.    
  
  
  
    18.   transform: translate(-100%, 0); 
      19.    
  
  
  
    19.   opacity: 0; 
      20.    
  
  
  
    20.   transition: all 500ms; 
      21.    
  
  
  
    21. } 
      22.

    TransitionGroup

    当有一组动画的时候，就可将这些CSSTransition放入到一个TransitionGroup中来完成动画

    同样CSSTransition里面没有in属性，用到了key属性

    TransitionGroup在感知children发生变化的时候，先保存移除的节点，当动画结束后才真正移除

    其处理方式如下：

    如下：

      
 
 
 
         
  
  
  
    1. import React, { PureComponent } from 'react' 
      2.    
  
  
  
    2. import { CSSTransition, TransitionGroup } from 'react-transition-group'; 
      3.    
  
  
  
    3.  
      4.    
  
  
  
    4. export default class GroupAnimation extends PureComponent { 
      5.    
  
  
  
    5.   constructor(props) { 
      6.    
  
  
  
    6.     super(props); 
      7.    
  
  
  
    7.  
      8.    
  
  
  
    8.     this.state = { 
      9.    
  
  
  
    9.       friends: [] 
      10.    
  
  
  
    10.     } 
      11.    
  
  
  
    11.   } 
      12.    
  
  
  
    12.  
      13.    
  
  
  
    13.   render() { 
      14.    
  
  
  
    14.     return ( 
      15.    
  
  
  
    15.       
       
      16.    
  
  
  
    16.          
      17.    
  
  
  
    17.           { 
      18.    
  
  
  
    18.             this.state.friends.map((item, index) => { 
      19.    
  
  
  
    19.               return ( 
      20.    
  
  
  
    20.                  
      21.    
  
  
  
    21.                   
      {item}
       
      22.    
  
  
  
    22.                  
      23.    
  
  
  
    23.               ) 
      24.    
  
  
  
    24.             }) 
      25.    
  
  
  
    25.           } 
      26.    
  
  
  
    26.          
      27.    
  
  
  
    27.          this.addFriend()}>+friend 
      28.    
  
  
  
    28.       
     
  •     ) 
  •   } 
  •  
  •   addFriend() { 
  •     this.setState({ 
  •       friends: [...this.state.friends, "coderwhy"] 
  •     }) 
  •   } 
  • } 

    • 对应css如下：

      
 
 
 
         
  
  
  
    1. .friend-enter { 
      2.    
  
  
  
    2.     transform: translate(100%, 0); 
      3.    
  
  
  
    3.     opacity: 0; 
      4.    
  
  
  
    4. } 
      5.    
  
  
  
    5.  
      6.    
  
  
  
    6. .friend-enter-active { 
      7.    
  
  
  
    7.     transform: translate(0, 0); 
      8.    
  
  
  
    8.     opacity: 1; 
      9.    
  
  
  
    9.     transition: all 500ms; 
      10.    
  
  
  
    10. } 
      11.    
  
  
  
    11.  
      12.    
  
  
  
    12. .friend-exit { 
      13.    
  
  
  
    13.     transform: translate(0, 0); 
      14.    
  
  
  
    14.     opacity: 1; 
      15.    
  
  
  
    15. } 
      16.    
  
  
  
    16.  
      17.    
  
  
  
    17. .friend-exit-active { 
      18.    
  
  
  
    18.     transform: translate(-100%, 0); 
      19.    
  
  
  
    19.     opacity: 0; 
      20.    
  
  
  
    20.     transition: all 500ms; 
      21.    
  
  
  
    21. } 
      22.

    参考文献

    网页题目：面试官：在React中组件间过渡动画如何实现？
    标题网址：http://www.shufengxianlan.com/qtweb/news9/157909.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    外贸建站知识

    分类信息网

    全网营销　　 　ios开发　　 　成都网络营销　　 　成都主机托管　　 　成都小程序商城　　 　成都花箱厂家　　 　艾名斯智能　　 　名片　　 　信衡房屋鉴定　　 　南宁旺客科技　　 　域名注册　　 　西部信息中心　　 　成都画册设计　　 　成都水电改造　　 　香港云空间　　 　户外广告设计　　 　UI设计　　 　成都服务器托管　　 　成都雨棚定制　　 　高端品牌网站建设