不能改变类型(危险，成功)并在vue带上添加动画

Question

我想用vue表带做一个进度条。我在这个链接上安装了vue带。

此链接

现在我添加了一个进度条，这个进度条显示，这个条只显示颜色主，不能显示动画。

 <template>
        <div class="progress">
            <progressbar now="99"  type="danger" striped animated ></progressbar>
        </div>
</template>

<script>
    import { progressbar } from 'vue-strap'

    export default {
        components: {
          progressbar
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

使用此代码，此类型为主，而该动画不工作。我将浏览器从chrome改为mozila，但它仍然无法工作。我的浏览器是最新的。

这有什么不对吗？我不知道为什么动画不起作用

Answer 1

当涉及到进度条动画时，VueStrap库中有一个bug。VueStrap中的进度条模板使用类active来动画，而在Bootstrap 4中，我们必须使用类progress-bar-animated。解决此问题的一个方法是创建您自己的“进度条”组件，该组件利用引导程序4。

自定义进度条组件可以编写为：

Vue.component('c-progressbar', {
  template: `
    <div class="progress">
      <div class="progress-bar" :class="progressClasses"
          role="progressbar"  
          :style="progressStyle"></div>
    </div>`,
  props: {
    striped: Boolean,
    animated: Boolean,
    now: {
      type: Number,
      required: true
    },
    contextType: {
      type: String,
      default: 'primary'
    }
  },
  data: function() {
    let context = 'bg-' + this.contextType
    return {
      progressClasses: {
        'progress-bar-striped': this.striped,
        'progress-bar-animated': this.animated,
        [context]: true
      },
      progressStyle: {
        width: this.now + '%'
      }
    }
  }
})
new Vue({ el: '#app' })

您可以使用这支笔进行测试：https://codepen.io/abdullah-shabaz/pen/YzXdYgd