日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 
  
  
  
  
export default class App2 extends React.PureComponent { 
  
  
  
  
 
  
  
  
  
  state = {show: true}; 
  
  
  
  
 
  
  
  
  
  onToggle = () => this.setState({show: !this.state.show}); 
  
  
  
  
 
  
  
  
  
  render() { 
  
  
  
  
    const {show} = this.state; 
  
  
  
  
    return ( 
  
  
  
  
       
  
  
  
  
         
  
  
  
  
            
  
  
  
            in={show} 
  
  
  
  
            timeout={500} 
  
  
  
  
            classNames={'fade'} 
  
  
  
  
            unmountOnExit={true} 
  
  
  
  
          > 
  
  
  
  
             
  
  
  
  
           
  
  
  
  
        

對(duì)應(yīng)css樣式如下：

  
 
 
 
   
  
  
  
.fade-enter { 
   
  
  
  
  opacity: 0; 
   
  
  
  
  transform: translateX(100%); 
   
  
  
  
} 
   
  
  
  
 
   
  
  
  
.fade-enter-active { 
   
  
  
  
  opacity: 1; 
   
  
  
  
  transform: translateX(0); 
   
  
  
  
  transition: all 500ms; 
   
  
  
  
} 
   
  
  
  
 
   
  
  
  
.fade-exit { 
   
  
  
  
  opacity: 1; 
   
  
  
  
  transform: translateX(0); 
   
  
  
  
} 
   
  
  
  
 
   
  
  
  
.fade-exit-active { 
   
  
  
  
  opacity: 0; 
   
  
  
  
  transform: translateX(-100%); 
   
  
  
  
  transition: all 500ms; 
   
  
  
  
} 
  
 
 

SwitchTransition

SwitchTransition可以完成兩個(gè)組件之間切換的炫酷動(dòng)畫(huà)

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

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

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

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

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

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

  
 
 
 
   
  
  
  
import { SwitchTransition, CSSTransition } from "react-transition-group"; 
   
  
  
  
 
   
  
  
  
export default class SwitchAnimation extends PureComponent { 
   
  
  
  
  constructor(props) { 
   
  
  
  
    super(props); 
   
  
  
  
 
   
  
  
  
    this.state = { 
   
  
  
  
      isOn: true 
   
  
  
  
    } 
   
  
  
  
  } 
   
  
  
  
 
   
  
  
  
  render() { 
   
  
  
  
    const {isOn} = this.state; 
   
  
  
  
 
   
  
  
  
    return ( 
   
  
  
  
       
   
  
  
  
           
  
  
  
                       timeout={500} 
   
  
  
  
                       key={isOn ? "on" : "off"}> 
   
  
  
  
          { 
   
  
  
  
           
   
  
  
  
            {isOn ? "on": "off"} 
   
  
  
  
           
   
  
  
  
        } 
   
  
  
  
         
   
  
  
  
       
   
  
  
  
    ) 
   
  
  
  
  } 
   
  
  
  
 
   
  
  
  
  btnClick() { 
   
  
  
  
    this.setState({isOn: !this.state.isOn}) 
   
  
  
  
  } 
   
  
  
  
} 
  
 
 

css文件對(duì)應(yīng)如下：

  
 
 
 
   
  
  
  
.btn-enter { 
   
  
  
  
  transform: translate(100%, 0); 
   
  
  
  
  opacity: 0; 
   
  
  
  
} 
   
  
  
  
 
   
  
  
  
.btn-enter-active { 
   
  
  
  
  transform: translate(0, 0); 
   
  
  
  
  opacity: 1; 
   
  
  
  
  transition: all 500ms; 
   
  
  
  
} 
   
  
  
  
 
   
  
  
  
.btn-exit { 
   
  
  
  
  transform: translate(0, 0); 
   
  
  
  
  opacity: 1; 
   
  
  
  
} 
   
  
  
  
 
   
  
  
  
.btn-exit-active { 
   
  
  
  
  transform: translate(-100%, 0); 
   
  
  
  
  opacity: 0; 
   
  
  
  
  transition: all 500ms; 
   
  
  
  
} 
  
 
 

TransitionGroup

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

同樣CSSTransition里面沒(méi)有in屬性，用到了key屬性

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

其處理方式如下：

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

如下：

  
 
 
 
   
  
  
  
import React, { PureComponent } from 'react' 
   
  
  
  
import { CSSTransition, TransitionGroup } from 'react-transition-group'; 
   
  
  
  
 
   
  
  
  
export default class GroupAnimation extends PureComponent { 
   
  
  
  
  constructor(props) { 
   
  
  
  
    super(props); 
   
  
  
  
 
   
  
  
  
    this.state = { 
   
  
  
  
      friends: [] 
   
  
  
  
    } 
   
  
  
  
  } 
   
  
  
  
 
   
  
  
  
  render() { 
   
  
  
  
    return ( 
   
  
  
  
      
 
   
  
  
  
         
   
  
  
  
          { 
   
  
  
  
            this.state.friends.map((item, index) => { 
   
  
  
  
              return ( 
   
  
  
  
                 
   
  
  
  
                  
{item}
 
   
  
  
  
                 
   
  
  
  
              ) 
   
  
  
  
            }) 
   
  
  
  
          } 
   
  
  
  
         
   
  
  
  
         this.addFriend()}>+friend