jquery - Bootstrap 3：反向动画进度条

Question

看到 2.0 的答案，但它们似乎在 3.0 中的工作方式不同。

我想反转 Bootstrap 3 中的进度条动画，所以它从左向右移动，而不是默认的从右向左移动。

我查看了 Bootstrap CSS，transition: width .6s ease;但是我不确定它如何确定条纹效果的移动方式。

谢谢。

Answer 1

如果你想让进度条从左到右动画，你可以通过将animation-direction属性设置为reverse.

在 BS3 的 css 文件中有这个部分：

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

您可以添加自己的类来添加所需的设置（默认为normal）：

.progress.active.my-reverse-class .progress-bar {
  -webkit-animation-direction: reverse;
     -moz-animation-direction: reverse;
      -ms-animation-direction: reverse;
       -o-animation-direction: reverse;
          animation-direction: reverse;
}

但是，请注意，UX 研究表明，进度条的从右到左动画对大多数用户来说感觉“更快”：https ://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate-向后

Answer 2

哦！哦！我得到了这个。您可以通过将进度条设置为 来交换进度条的方向float: right。它的功能应该完全相同。

Answer 3

我解决了它旋转进度条，这里是一个例子：

.progress-bar {
    transform: rotate(180deg);
}

https://codepen.io/anon/pen/jGYqrx

Answer 4

进度条从右到左动画：

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

进度条从左到右动画：

.progress.active .progress-bar {
  -webkit-animation: reverse progress-bar-stripes 2s linear infinite;
     -moz-animation: reverse progress-bar-stripes 2s linear infinite;
      -ms-animation: reverse progress-bar-stripes 2s linear infinite;
       -o-animation: reverse progress-bar-stripes 2s linear infinite;
          animation: reverse progress-bar-stripes 2s linear infinite;
}