React動(dòng)畫(huà)

(1)必須依賴(lài)react-transition-group
(2)類(lèi)的使用以及鉤子函數(shù)

• (一) react-transition-group使用

(1) 引入

import { CSSTransition} from 'react-transition-group'

(2) 使用

• 必須用CSSTransition套起來(lái)
• in 表示開(kāi)關(guān)
• 屬性 timeout 表示動(dòng)畫(huà)的時(shí)間
• appear = {true}表示一加載就執(zhí)行
• classNames = "fade" 表示起的變量名稱(chēng)
• unmountOnExit表示用完了以后DOM消失
• onEnter表示鉤子函數(shù)剛進(jìn)入的時(shí)候里面就一個(gè)參數(shù)el
• onEnter ,onEntering ,onEntered onExit onExiting onExited 鉤子函數(shù)

 <CSSTransition
          in={this.state.flag}
          timeout={2000}
          appear={true}
          classNames="fade"
          unmountOnExit
          onEnter={el => {
            el.style.color = 'red'
          }}
        >
          <div>
            <div>hello</div>
          </div>
        </CSSTransition>

PS :類(lèi)名

• fade-enter 剛?cè)雸?chǎng)的時(shí)候
• fade-enter-active 全程參與
• fade-enter-done 結(jié)束的時(shí)候
• 特別注意的就是 fade-appear-active這里看情況要是opacity就不加，要是運(yùn)動(dòng)之類(lèi)的就必須加上最后的位置

.fade-enter,
.fade-appear {
  transform: translate(0, 0);
}
.fade-appear-active {
  transform: translate(80%, 0);
  transition: all 2s linear;
}
.fade-enter-active {
  transform: translate(80%, 0);
  transition: all 2s linear;
}
.fade-enter-done {
  transform: translate(80%, 0);
}
.fade-exit {
  transform: translate(80%, 0);
}
.fade-exit-active {
  transform: translate(0, 0);
  transition: all 2s linear;
}
.fade-exit-done {
  transform: translate(0, 0);
  color: blue;
}

• (二) TransitonGroup

多個(gè)動(dòng)畫(huà)的特效。最外層必須用TransitionGroup包起來(lái)。

  <TransitionGroup key={index}>
                <CSSTransition
                  in
                  timeout={2000}
                  appear={true}
                  classNames="fade"
                  unmountOnExit
                  onEnter={el => {
                    el.style.color = 'red'
                  }}
                >
                  <List
                    content={item}
                    index={index}
                    deletedate={this.deleteone.bind(this)}
                  />
                </CSSTransition>
              </TransitionGroup>