今天要介紹在React Component中加入CSS的方式。

• 用字串的方式為className命名
  render() {
  return Menu
  }
• 透過props或state的方式帶入class的名字

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

React中製作動畫效果

除了用CSS中的Keyframe製作動畫效果外，也可以使用前人寫好的React動畫套件，以下用react-transition-group作介紹:

套件安裝

npm install react-transition-group --save

安裝完後，可以看到官方文件裡面有介紹幾個重要的Component。

• Transition
• CSSTransition
• TransitionGroup
• SwitchTransition

使用CSSTransition

引入欲使用的Component。

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

套用CSSTransition到原有的靜態架構中。

 return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
    </div>
  );
}

CSSTransition的屬性介紹:

• in:判斷是否要出現該動畫
• timeout:動畫持續時間
• classNames:針對該動畫給他一個獨立的命名，可以視作namespace。

修改動畫效果

除了使用套件裡面附的動畫效果外，也可以自訂義一個動畫效果，下列為動畫進入時狀態改變的屬性:

• namespace-enter: 動畫進入前的樣式或是稱作初始值
• namespace-enter-active:進入動畫直到完成時之前的 CSS 樣式;
• namespace-exit:動畫退出前的 CSS 樣式;
• namespace-exit-active:退出動畫直到完成時之前的的 CSS 樣式。

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}