進度條不動畫

我有一個進度條列表，我希望看到動畫。我使用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>

在摘要中我使用的maxcdn但如果我刪除maxcdn進度條仍然顯示，但不動畫。我不知道爲什麼。引導版本是4.0.0 alpha 6.

來源

2017-03-07 TroyPilewski

bootstrap.min.css V3.3.7不得與引導兼容4 –

這是因爲你的本地版本是Bootstrap 4 alpha，這需要額外的動畫類。您正在使用的CDN適用於Bootstrap 3，它不需要爲動畫進度條添加額外的類。見下面的答案。 – APAD1

謝謝@ APAD1 – TroyPilewski

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>

來源

2017-03-07 21:26:02 APAD1

的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>

來源

2017-03-07 21:34:20 Davide

進度條不動畫

回答

相關問題