react 官网动画库（react-transition-group）的新写法
這篇文章主要介紹了關(guān)于react 官網(wǎng)動畫庫（react-transition-group）的新寫法 ，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下
一、react-transition-group 一個官網(wǎng)提供的動畫過度庫。
搜索了網(wǎng)上關(guān)于react動畫的，很多的答案都是很久以前的了老版本了，而現(xiàn)在官方提供的是叫react-transition-group 它是以前兩個的合體版本，所以寫下這個記錄一下，同時也給一些需要的猿門給一些小的提示。
1、安裝
# npm npm install react-transition-group --save # yarn yarn add react-transition-group
登錄后復(fù)制
而官方提供的三個組建Transition,CSSTransition,TransitonGroup。
Transition
過渡組件(Transiton)允許您用一個簡單的聲明性API描述隨著時間的推移從一個組件狀態(tài)到另一個組件狀態(tài)的轉(zhuǎn)換。最常用的是用來動畫一個組件的安裝和卸載，但也可以用來描述在適當(dāng)?shù)倪^渡狀態(tài)。默認(rèn)情況下，該組件不會更改其呈現(xiàn)的組件的行為，它只跟蹤組件的“進入”和“退出”的狀態(tài)。由你來為這些狀態(tài)定義效果。（翻譯）
實際的情況就是你如果只寫這個組件是沒有任何的效果的，就和你寫一個p一樣。所以你需要給他們賦予一些參數(shù)才可以。例如下面這個例子
//自己簡單的封裝了一個，該有的參數(shù)都由了，可以自行粘貼在自己的代碼里面去試試。
class Fade extends React.Component {
constructor(props) {
super(props);
}
done =() => {
// console.log('結(jié)束了')
}
addaddEndListener = (node) => { //原生時間transition運動的事件
node.addEventListener('transitionend', this.done, false);
}
// 三個進入狀態(tài)的事件，可以做你想做的事情
onEnter = (node, isAppearing) => {
console.log(isAppearing, 'onEnter')
}
onEntering = (node, isAppearing) => {
console.log(isAppearing, 'onEntering')
}
onEntered = (node, isAppearing) => {
console.log(isAppearing, 'onEntered')
}
// 三個退出的狀態(tài)的事件
onExit = (node) => {
console.log('onExit')
}
onExiting = () => {
console.log('onExiting')
}
onExited = () => {
console.log('onExited')
this.props.self()
}
render() {
const { in: inProp, dur} = this.props;
const defaultStyle = {
transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,
transform: 'translateX(100px)',
opacity: '0'
}
const transitionStyles = {
entering: { transform: 'translateX(100px)', opacity: '0'},
entered: { transform: 'translateX(0px)', opacity: '1' },
exiting: {transform: 'translateX(0px)', opacity: '1'},
exited: {transform: 'translateX(0px)', opacity: '0'}
};
const duration = {
enter: 300,
exit: 300,
}
// 上面的都是基本參數(shù)，樣式的轉(zhuǎn)變以及時間的設(shè)定，具體的可以看官網(wǎng)文檔
// 樣式也可以寫成className 例如<MyComponent className={`fade fade-${status}`} />
return (
<Transition
onEnter={this.onEnter}
onEntering={this.onEntering}
onEntered={this.onEntered}
onExit={this.onExit}
onExiting={this.onExiting}
onExited={this.onExited}
addEndListener={this.addaddEndListener}
in={inProp}
unmountOnExit={false} // 為true 代表退出的時候移除dom
appear={true} // 為true 渲染的時候就直接執(zhí)行動畫，默認(rèn)false，
timeout={duration}
>
{
state => {
console.log(state, '###') //你可以很直觀的看到組件加載和卸載時候的狀態(tài)
return(
<p style={{
...defaultStyle,
...transitionStyles[state]
}}>
{this.props.children}
</p>
)
}
}
</Transition>
);
}
}
登錄后復(fù)制
其中上面的狀態(tài)有四種：
entering entered exiting exited
登錄后復(fù)制
組件的初始化狀態(tài)都停留在exited
上面就是寫的一個最基本的例子，下面是如何的調(diào)用
let num = 1;
class Dnd extends React.Component {
state = {
ins: true,
current: 1,
dom: <p className={l.test}>
ceshi weizhi {num}
</p>
}
handle = (bool) => {
this.setState({
test: !bool
})
}
end = () => {
const that = this;
num = num + 1;
setTimeout(function () {
that.setState({
test: true,
dom: <p className={l.test}>
888888 {num}
</p>
})
}, 500)
}
render () {
const { location } = this.props
const { test } = this.state;
return (
<MainLayout location={location}>
<Button onClick={this.handle.bind(null, this.state.test)}>點擊transition</Button>
<Fade in={this.state.test} self={this.end}>
{this.state.dom}
</Fade>
</MainLayout>
)
}
}
// 效果是每次點擊按鈕都會進行一次進場和出場的動畫。也可以自行衍生。
登錄后復(fù)制
這個組件大概就是這樣的，這樣適合寫一個tab類型的頁面，在切換的時候可以展示不同的dom
登錄后復(fù)制
CSSTransition
此組件是在轉(zhuǎn)換的出現(xiàn)、進入、退出階段應(yīng)用一對類名(也就是className),靠這個來激活CSS動畫。所以參數(shù)和平時的className不同，參數(shù)為：classNames
參數(shù)：（主要）in, timeout, unmountOnExit, classNames, 用法同Transition。看如下例子：
state = {
star: false
}
<Button onClick={this.handleStar.bind(null, star)}>start</Button>
<CSSTransition
in={star}
timeout={300}
classNames="star"
unmountOnExit
>
<p className="star">⭐</p>
</CSSTransition>
登錄后復(fù)制
效果是點擊button 顯示星星，在點擊消失星星的動畫！
參數(shù)classNames="star", 組件會找對應(yīng)狀態(tài)的className, 如下
.star {
display: inline-block;
margin-left: 0.5rem;
transform: scale(1.25);
}
.star-enter {
opacity: 0.01;
transform: translateY(-100%) scale(0.75);
}
.star-enter-active {
opacity: 1;
transform: translateY(0%) scale(1.25);
transition: all 300ms ease-out;
}
.star-exit {
opacity: 1;
transform: scale(1.25);
}
.star-exit-active {
opacity: 0;
transform: scale(4);
transition: all 300ms ease-in;
}
登錄后復(fù)制
依次執(zhí)行的順序是
1、星星顯示 對應(yīng)的class為star-enter star-enter-active 動畫走完為star-enter-done 2、星星消失 對應(yīng)的class為star-exit star-exit-active 動畫走完為star-exit-done
登錄后復(fù)制
如果按照官網(wǎng)的解釋就是如下， 有興趣的可以自行去試一試。
classNames={{
appear: 'my-appear',
appearActive: 'my-active-appear',
enter: 'my-enter',
enterActive: 'my-active-enter',
enterDone: 'my-done-enter,
exit: 'my-exit',
exitActive: 'my-active-exit',
exitDone: 'my-done-exit,
}}
登錄后復(fù)制
每個階段的鉤子函數(shù)同Transition.
TransitionGroup
一看group就知道肯定是列表形態(tài)的動畫了！但是看了官網(wǎng)后知道，TransitionGroup不提供任何形式的動畫，具體的動畫取決與你包裹的Transition || CSSTransition的動畫，所以你可以在列表里面做出不同類型的動畫出來。下面來看一個例子
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 1, text: 'Buy eggs' },
{ id: 2, text: 'Pay bills' },
{ id: 3, text: 'Invite friends over' },
{ id: 4, text: 'Fix the TV' },
]
}
}
render() {
const { items } = this.state;
return (
<p>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="fade"
>
<p>
<Button
onClick={() => {
this.setState(state => ({
items: state.items.filter(
item => item.id !== id
),
}));
}}
>
×
</Button>
{text}
</p>
</CSSTransition>
))}
</TransitionGroup>
<Button
type="button"
onClick={() => {
const text = prompt('Enter some text');
if (text) {
this.setState(state => ({
items: [
...state.items,
{ id: 1123, text },
],
}));
}
}}
>
Add Item
</Button>
</p>
);
}
}
登錄后復(fù)制
css
.fade-enter {
opacity: 0.01;
}
.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0.01;
transition: opacity 500ms ease-in;
}
登錄后復(fù)制
效果是增加和刪除列表項中的一個，產(chǎn)生漸入漸失的效果！說白了也就是多個Transition 或者CSSTransition組合的效果。
但是也提供一些參數(shù)
1、component default 'p' 也就是TransitionGroup渲染出來的標(biāo)簽為p，也可以就行更改，例如component="span" 渲染出來的就是span標(biāo)簽了 2、children 相當(dāng)于你給的組件，可以是字符串或者自定義組件等。 3、appear 寫在TransitionGroup里面相當(dāng)于開啟或者禁止里面的Transition || CSSTransition 方便寫的作用
登錄后復(fù)制
三個組件大概的特性就是這些。剩下的全靠自己去開發(fā)了！后續(xù)會錄入一些小的例子來講解，敬請期待。。。。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
原生JS基于window.scrollTo()封裝垂直滾動動畫工具函數(shù)
Jquery添加loading過渡遮罩
以上就是react 官網(wǎng)動畫庫（react-transition-group）的新寫法的詳細(xì)內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的react 官网动画库（react-transition-group）的新写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一般线性模型和混合线性模型_线性混合模型
- 下一篇： 苹果xr耳机孔在哪里(苹果官网报价)