DAY25 在React中加入CSS

今天要介绍在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;
}