React整理总结（四）

1.过渡动画react-transition-group

• Transition 与平台无关，不一定使用css实现
• CSSTransition组件，in属性控制展示隐藏，添加className；有三个状态appear | enter | exit
  • 第一类，开始状态：对于的类是-appear、-enter、exit；
  • 第二类：执行动画：对应的类是-appear-active、-enter-active、-exit-active；
  • 第三类：执行结束：对应的类是-appear-done、-enter-done、-exit-done；
• SwitchTransition可以完成两个组件之间切换的炫酷动画：
  • SwitchTransition中主要有一个属性：mode，有两个值in-out：表示新组件先进入，旧组件再移除；out-in：表示就组件先移除，新组建再进入；

2.CSS 编写

• 内联样式
• css文件引入
• cssmodule， 文件命名xxx.module.css
• css in js, 如styled-component
  • props可以被传递给styled组件。获取props需要通过${}传入一个插值函数，props会作为该函数的参数；这种方式可以有效的解决动态样式的问题；
  • 添加attrs属性
• 动态添加css，如classnames