2.3.8　动画样式

在Bootstrap里，动画样式应用得不是很多，只在进度条组件里会使用到。但是为了能够方便读者以后开发自定义组件，我们还是简述一下动画的定义，细节分析请阅读4.16节。

先来看一下动画是如何应用的：只需要在progress样式上应用一个active样式，即可开启动画过渡效果。示例代码如下所示：

  1. <div class="progress progress-striped active">
  2.     <div class="progress-bar" style="width: 45%">
  3.         <span class="sr-only">45% Complete</span>
  4.     </div>
  5. </div>

上述代码的运行效果如图2-15所示。

2.3.8　动画样式 - 图1 图2-15　progress进度条动画运行效果

在这里使用了active样式和progress样式叠加在一起产生动画过渡效果，我个人觉得active这个名称不太合适，因为状态样式里已经用过了。建议大家在做开发的时候设置一个别的名称，比如animation等。动画的定义也十分简单，只需要指定animation的名称和运行时间即可。本例的名称是progress-bar-stripes，关于progress-bar-stripes的详细定义请阅读4.16节。动画设置如下所示：

  1. // 源码4551行
  2. .progress.active .progress-bar {
  3.   -webkit-animation: progress-bar-stripes 2s linear infinite;
  4.                                                         /* 2秒过渡40像素,无限循环 */
  5.           animation: progress-bar-stripes 2s linear infinite;   /* 其他浏览器 */
  6. }