2018-07-24 回到起点--在React中使用Animat

正常使用webpack打包的React项目，在项目打包成bundle的时候会对代码丑化（uglyfy），因此组件的类名会在打包时被混淆。

css模块化，请参考 简书的“入门webpack，看这篇就够了”。

在React中，我推荐的方式如下，不需引入别的依赖。

使用方式如下

其中，先把animate.css封装为styles对象，然后在className中以图中方式拼接。

注意！这里如果直接className写成这样className="animated lightSpeedIn"形式，会无法加载样式，上面已经说过是由uglyfy的原因，因此需要加载到对象中，以模块形式让weback自己去寻找依赖。

animate.css的使用非常简单，在给html标签类名加上 animated和其中的样式效果名即可，具体见animate.css官网。例：

<div class="animated brounce">  Its a test</div>

特效效果见animate.css官网。

2018/7/25更新 以模版字符串形式拼接

此举可以在上面的操作中简化一定工作量，其次模板字符串的作用不局限于此，很多需要动态传值的时候都可以用到。