react 组件连动效果_一个简单的构建React组件动画方案

最近对前端动画方案做了一些调研，想找到一个简单且易复制的方案在React组件中使用(也就是用复制粘贴解决80%的问题)，最终选择官方的react-transition-group加animate.css

我调研过的方案

anijs online demo 酷炫是很酷炫但是引用方式比较原始不太适合现在的前端构建流程和React

velocity.js 用jQuery $.animate() 相同的API 但是可以不依赖 jQuery,这方式并不是我所期望的故放弃

react-motion 非常酷炫如果要做复杂动画目前来看非它莫属，但是于我简单易复制的期望不符

react-transition-group 官方的方案容易上手，但是应对复杂动画比较无力，可是我并不做复杂的动画因此这也就是心中的完美方案

关于CSS动画

本文并不打算介绍 CSS 动画但是推荐一些资源，如果你对CSS 动画比较陌生也先阅读下面的资源

animationendEvent监听动画是否结束，一个比较实用的功能就是类似fadeout 这种退场动画完全结束的时候删除对应的DOM结构

animate.css

animate.css 是一个出色的样式库，提供了各种常用的CSS 动画效果,简易的例子如下基本见名知意这里就不做额外的解释了

Example

不过大多数的时候我们必然不需要引入全部样式，甚至我们可能只想copy一个动画效果，在这里我fork 了一份 animate.css 然后在其构建的过程中添加了sourcemap方便copy