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;
}

但请注意,用户体验研究表明,对于大多数用户来说,进度条的从右到左动画感觉"更快":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