进度条不动画答案

【问题标题】：Progress Bars Don't Animate进度条不动画
【发布时间】：2017-03-08 05:34:20
【问题描述】：

我有一个我希望看到动画的进度条列表。当我使用 maxcdn 时，我看到它们动画，但如果我使用本地引导引用，则不会。请帮我理解有什么问题...

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <p>Microsoft Office SharePoint Services</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
      <span>7 Years</span>
    </div>
  </div>
</body>

在 sn-p 中，我使用的是 maxcdn，但如果我删除了 maxcdn，进度条仍会显示，但不会显示动画。我不确定为什么。启动版本是 4.0.0 alpha 6。

【问题讨论】：

bootstrap.min.css V3.3.7 不能与 bootstrap 4 兼容
因为你的本地版本是Bootstrap 4 alpha，需要一个额外的动画类。您使用的 CDN 用于 Bootstrap 3，它不需要动画进度条的附加类。请参阅下面的答案。
谢谢@APAD1
不客气！

标签： html css bootstrap-4

【解决方案1】：

In Bootstrap 4 你需要将progress-bar-animated 类添加到progress-bar 元素中。

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <p>Microsoft Office SharePoint Services</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
      <span>7 Years</span>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

Jsfiddle 示例：https://jsfiddle.net/a2f6g3gs/

添加：

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        var progress = setInterval(function() {
        var $bar = $('.progress-bar');

        if ($bar.width()>=400) {
            clearInterval(progress);
            $('.progress-bar').removeClass('active');
        } else {
            $bar.width($bar.width()+40);
        }
        //$bar.text($bar.width()/4 + "%");
    }, 1);
    });
</script>
<style>
    .progress .progress-bar {
        -moz-animation-name: animateBar;
        -moz-animation-iteration-count: 1;
        -moz-animation-timing-function: ease-in;
        -moz-animation-duration: .4s;

        -webkit-animation-name: animateBar;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-duration: .4s;

        animation-name: animateBar;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: .4s;
    }

    @-moz-keyframes animateBar {
        0% {-moz-transform: translateX(-100%);}
        100% {-moz-transform: translateX(0);}
    }
    @-webkit-keyframes animateBar {
        0% {-webkit-transform: translateX(-100%);}
        100% {-webkit-transform: translateX(0);}
    }
    @keyframes animateBar {
        0% {transform: translateX(-100%);}
        100% {transform: translateX(0);}
    }
</style>

【讨论】：