基於react-transition-group的react過渡動畫

hy醬發表於2019-03-13
React動畫

基於react-transition-group的react過渡動畫

react相關庫原始碼淺析， react ts3 專案

基於react-transition-group的react過渡動畫

react-transition-group是react官方提供的動畫庫，Transition的原始碼淺析，本專案中目前實現了一種場景下的過渡動畫:點選標籤，路由跳轉，掛載與解除安裝需要過渡動畫的元件。

專案中Disc.tsx、TopList.tsx、SingerDetail.tsx元件都屬於這種場景下的需求，因此拿Disc.tsx來舉例說明。

Recommend.tsx

class Recommend extends Component<Props,State>{
	...
    selectDisc = (disc:any) => {
        this.props.history.push(`/recommend/${disc.dissid}`);
        this.props.setDisc(disc)
    }

    render(){
        // console.log("Recommend的render")
        const {recommends, discList} = this.state;
        return(
            <div>
                <ul>
					<li className="item" key={index} onClick={() => {this.selectDisc(item)}}/>
                </ul>
				<Route path="/recommend/:id" component={Disc}/>
            </div>
        )
    }
}
複製程式碼

當點選 li 的時候，向history中push一個location，觸發路由跳轉，掛載對應的元件為Disc，此時利用CSSTransition進行過渡。

Disc.scss

.disc-transition-appear {
  transform: translateX(100%);
}
.disc-transition-appear-active {
  transform: translateX(0%);
  transition: all 500ms ease-out;
}

//.disc-transition-enter {
//  transform: translateX(100%);
//}
//.disc-transition-enter-active {
//  transform: translateX(0%);
//  transition: all 500ms ease-out;
//}


.disc-transition-exit {
  transform: translateX(0%) scale(0.5);
}
.disc-transition-exit-active {
  transform: translateX(100%) scale(1);
  transition: all 500ms ease-in;
}
複製程式碼

利用appear以及exit，當元件第一次掛載的時候初始位置為.disc-transition-appear對應位置，即與原位置偏移一個寬度的位置，在原位置的右方。掛載的過程中，樣式變為.disc-transition-appear-active，並且向原位置(translateX(0%))移動。即過載的過程實現從右向左滑動。最終樣式.disc-transition-appear-active被移除。

當元件解除安裝的時候，初始位置為原位置，但是尺寸縮小，見.disc-transition-exit。解除安裝過程中，樣式變為.disc-transition-exit-active，元素向原位置右方一個寬度的位置移動，並且尺寸逐漸增大，見.disc-transition-exit-active。

Disc.tsx

class DiscBase extends Component<DiscBasePropType, DiscBaseStateType>{
    unmoutedFlag:boolean;
    constructor(props:DiscBasePropType){
        super(props)
        this.unmoutedFlag=false
        this.state  = {
            showMusicList: true,
            songs:[]
        }
    }

    back = () => {
        this.setState({
            showMusicList:false
        })
    }

    render(){
        const { disc } = this.props;
        const { songs } = this.state;
        return(
            <CSSTransition
                in={this.state.showMusicList}
                timeout={500}
                classNames="disc-transition"
                appear={true}
                unmountOnExit
                onExited = { () => {
                    this.props.history.goBack()
                } }
            >
                <MusicList singerName={disc.name} bgImage={disc.imgurl} songs={songs} back={this.back}/>
            </CSSTransition>
        )
    }
}
複製程式碼

in：表示元件的狀態是否翻轉，即入場動畫entered（appear）與退場動畫exited狀態之間的翻轉。appear：表示第一次掛載的時候，元件是否執行過渡動畫。unmountOnExit：當狀態為exited的時候，是否解除安裝元件，本例中只用到了unmountOnExit為預設值false，是因為路由跳轉，元件會被解除安裝所以不需要設定為true，往往unmountOnExit與appear都需要設定為true。onExited：該函式會在元件狀態變為exited的時候執行，本例中會執行路由跳轉，解除安裝元件，如果在元件例項方法back中路由跳轉，無法保證元件解除安裝之後跳轉，導致過渡動畫提前中斷。

相關文章