av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

面試官：在React中組件間過渡動(dòng)畫如何實(shí)現(xiàn)？

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了沙縣免費(fèi)建站歡迎大家使用！

一、是什么

在日常開發(fā)中，頁面切換時(shí)的轉(zhuǎn)場(chǎng)動(dòng)畫是比較基礎(chǔ)的一個(gè)場(chǎng)景

當(dāng)一個(gè)組件在顯示與消失過程中存在過渡動(dòng)畫，可以很好的增加用戶的體驗(yàn)

在react中實(shí)現(xiàn)過渡動(dòng)畫效果會(huì)有很多種選擇，如react-transition-group，react-motion，Animated，以及原生的CSS都能完成切換動(dòng)畫

二、如何實(shí)現(xiàn)

在react中，react-transition-group是一種很好的解決方案，其為元素添加enter，enter-active，exit，exit-active這一系列勾子

可以幫助我們方便的實(shí)現(xiàn)組件的入場(chǎng)和離場(chǎng)動(dòng)畫

其主要提供了三個(gè)主要的組件：

  • CSSTransition：在前端開發(fā)中，結(jié)合 CSS 來完成過渡動(dòng)畫效果
  • SwitchTransition：兩個(gè)組件顯示和隱藏切換時(shí)，使用該組件
  • TransitionGroup：將多個(gè)動(dòng)畫組件包裹在其中，一般用于列表中元素的動(dòng)畫

CSSTransition

其實(shí)現(xiàn)動(dòng)畫的原理在于，當(dāng)CSSTransition的in屬性置為true時(shí)，CSSTransition首先會(huì)給其子組件加上xxx-enter、xxx-enter-active的class執(zhí)行動(dòng)畫

當(dāng)動(dòng)畫執(zhí)行結(jié)束后，會(huì)移除兩個(gè)class，并且添加-enter-done的class

所以可以利用這一點(diǎn)，通過css的transition屬性，讓元素在兩個(gè)狀態(tài)之間平滑過渡，從而得到相應(yīng)的動(dòng)畫效果

當(dāng)in屬性置為false時(shí)，CSSTransition會(huì)給子組件加上xxx-exit和xxx-exit-active的class，然后開始執(zhí)行動(dòng)畫，當(dāng)動(dòng)畫結(jié)束后，移除兩個(gè)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 
  •       
    •  
  •     ); 
  •   } 
  • } 

    • 對(duì)應(yīng)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可以完成兩個(gè)組件之間切換的炫酷動(dòng)畫

    比如有一個(gè)按鈕需要在on和off之間切換，我們希望看到on先從左側(cè)退出，off再從右側(cè)進(jìn)入

    SwitchTransition中主要有一個(gè)屬性mode，對(duì)應(yīng)兩個(gè)值：

    • in-out：表示新組件先進(jìn)入，舊組件再移除;
    • out-in：表示就組件先移除，新組建再進(jìn)入

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

    里面的CSSTransition組件不再像以前那樣接受in屬性來判斷元素是何種狀態(tài)，取而代之的是key屬性

    下面給出一個(gè)按鈕入場(chǎng)和出場(chǎng)的示例，如下：

      
 
 
 
         
  
  
  
    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文件對(duì)應(yīng)如下：

      
 
 
 
         
  
  
  
    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

    當(dāng)有一組動(dòng)畫的時(shí)候，就可將這些CSSTransition放入到一個(gè)TransitionGroup中來完成動(dòng)畫

    同樣CSSTransition里面沒有in屬性，用到了key屬性

    TransitionGroup在感知children發(fā)生變化的時(shí)候，先保存移除的節(jié)點(diǎn)，當(dāng)動(dòng)畫結(jié)束后才真正移除

    其處理方式如下：

    • 插入的節(jié)點(diǎn)，先渲染dom，然后再做動(dòng)畫
    • 刪除的節(jié)點(diǎn)，先做動(dòng)畫，然后再刪除dom

    如下：

      
 
 
 
         
  
  
  
    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"] 
  •     }) 
  •   } 
  • } 

    • 對(duì)應(yīng)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.

    參考文獻(xiàn)


    當(dāng)前名稱：面試官：在React中組件間過渡動(dòng)畫如何實(shí)現(xiàn)？
    本文路徑：http://uogjgqi.cn/article/dhcoeso.html
    掃二維碼與項(xiàng)目經(jīng)理溝通

    我們?cè)谖⑿派?4小時(shí)期待你的聲音

    解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊