今天在查看react-transition-group的時候,忽然發現多出來了一個組件: javascript
其實vue的官網描述的已經很是詳細了,因此在這裏我就再也不重複敘述了,給你們一個傳送門:vue transition modes,總而言之它實現了這麼一個炫酷的功能:在你的組件切換的時候,可讓將要移除的組件和將要進入的組件有個動畫效果,這兩個動畫效果還有個時間差,時間差有兩種模式,一是將要移除的組件先來個動畫,好比淡出,等它淡出完了,新的組件再淡入,這樣的時間差造成了完整的一套淡入淡出效果,另外一種模式則徹底相反,先新的組件淡入,再把老組件淡出。css
然而就是在vue中很輕鬆就能夠實現的炫酷效果在react中卻沒有對應的封裝好的組件,只能本身很麻煩的實現,因而乎SwitchTransition橫空出世啦!html
首先react的過渡組件並不像vue那樣直接集成在vue核心庫之中,而是須要手動的去安裝:vue
#npm
npm i react-transition-group -S
#yarn
yarn add react-transition-group
複製代碼
接着咱們就來用react來模仿一下vue的官方案例java
// /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'
function App() {
const [ bool, setBool ] = useState(false)
const onClick = () => setBool(b => !b)
return (
<SwitchTransition> <CSSTransition classNames="fade" timeout={1000} key={bool ? "on" : "off"}> { bool ? (<button onClick={onClick}>on</button>) : (<button onClick={onClick}>off</button>) } </CSSTransition> </SwitchTransition>
);
}
export default App;
複製代碼
/* /src/App.css */
.fade-enter, .fade-exit-active {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
}
.fade-enter-active, .fade-exit-active {
transition: opacity 1s;
}
複製代碼
// /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'
function App() {
const [ bool, setBool ] = useState(false)
const onClick = () => setBool(b => !b)
return (
<div className="relative"> <SwitchTransition mode="in-out"> <CSSTransition classNames="fade" timeout={500} key={bool ? "on" : "off"}> { bool ? (<button className="btn" onClick={onClick}>on</button>) : (<button className="btn" onClick={onClick}>off</button>) } </CSSTransition> </SwitchTransition> </div>
);
}
export default App;
複製代碼
/* /src/App.css */
.fade-enter {
opacity: 0;
transform: translateX(100%);
}
.fade-enter-active {
transform: translateX(0);
opacity: 1;
}
.fade-exit {
transform: translateX(0);
}
.fade-exit-active {
opacity: 0;
transform: translateX(-100%);
}
.fade-enter-active, .fade-exit-active {
transition: opacity .5s, transform .5s;
}
.relative {
position: relative;
}
.btn {
position: absolute;
top: 0;
left: 0;
}
複製代碼
在SwitchTransition組件上一共就只有mode這麼一個屬性,屬性一共就只有倆值:out-in、in-out,若是是out-in的話甚至連屬性均可以省略不寫了,由於是默認屬性。react
怎麼樣是否是很好玩呢,帶你們複習了一遍Vue的同時順便又學習了一下react-transition-group的新組件,趕忙打開命令行create個react-app而後yarn add react-transition-group一下吧!npm