react CSSTransition 參數

標簽包裹的元素會有動畫效果

 

in 為控制動畫開啟關閉的“開關”，true為開啟，false為關閉
classNames 為對應的樣式類名，和下面的css內的名字對應
timeout 為動畫執行時間
unmountOnExit 當動畫效果為隱藏時，該標簽會從dom樹上移除，類似js操作
appear 是否第一次加載該組件時啟用相應的動畫渲染，css文件中有含有appear的均和此標簽相關
onEntered 入場動畫結束時觸發的鈎子
onEnter入場動畫第一幀時執行
onEntering當入場動畫執行到第二幀時執行
onExit出場動畫第一幀時執行
onExiting出場動畫第二幀時執行
onExited整個動畫出場結束時執行

 css樣式

/*入場動畫開始*/
.fade-enter {
  opacity: 0;
}

/*入場動畫過程*/
.fade-enter-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}

/*入場動畫結束*/
.fade-enter-done {
  opacity: 1;
}

/*離場動畫開始*/
.fade-exit {
  opacity: 1;
}

/*離場動畫過程*/
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}

/*離場動畫結束*/
.fade-exit-done {
  opacity: 0;
}

/*頁面第一次加載時的開始狀態*/
.fade-appear {
  opacity: 0;
}

/*頁面第一次加載時的動畫過程*/
.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}