React 动效设计实现方式详解

所谓的动效设计，从设计的角度来讲，是人机交互的一种提升，合适的动效设计有利于作品，没有最好用的工具，只有最合适自身情况的工具

实现动效的两种方式

1. 第一种实现方式就是非常简单通用 操作class 类名，通过c3去实现动效
2. js操作dom节点实现动效,

所有的前端动画都是围绕着两个来，React 也不例外，不过都是在这两者中平衡，

最简单的方式操作class进行CSS动画变化

C3有很多的动画效果都可以被实现，结合css库，那么实现动画是非常简单的事情，只需要改变一下组件或者类上的css就行了，非常的方便

通过JS来进行操作

这种方式是相对比较灵活的，上天入地都可以，市面上有非常多的动效库，react官方也有推荐动效库，我们推荐使用**react-spring** 和**react-motion**

两种使用方式都比较的简单，这里不进行过多的说明，看说官方API明就好了