Fortschrittsbalken animiere nicht

Ich habe eine Liste von Fortschrittsbalken, die ich animieren möchte. Ich sehe sie animieren, wenn ich die maxcdn benutze, aber nicht, wenn ich lokale Bootstrap-Referenzen verwende. Bitte helfen Sie mir zu verstehen, was falsch ...Fortschrittsbalken animiere nicht

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

Im Snippet ich die maxcdn bin mit aber wenn ich die maxcdn die Fortschrittsbalken noch angezeigt entfernen aber animieren nicht. Ich bin mir nicht sicher warum. Die Boot-Version ist 4.0.0 alpha 6.

Quelle

2017-03-07 TroyPilewski

bootstrap.min.css V3.3.7 darf nicht mit Bootstrap-kompatibel sein 4 –

Es ist, weil Ihr lokale Version ist Bootstrap 4 Alpha, die eine zusätzliche benötigt Klasse für Animation. Das CDN, das Sie verwenden, ist für Bootstrap 3, das diese zusätzliche Klasse für eine animierte Fortschrittsleiste nicht benötigt. Siehe Antwort unten. – APAD1

Danke @ APAD1 – TroyPilewski

In Bootstrap 4 Sie müssen die Klasse progress-bar-animated zum progress-bar Element hinzufügen.

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

Quelle

2017-03-07 21:26:02 APAD1

Jsfiddle Beispiel: https://jsfiddle.net/a2f6g3gs/

Anzahl:

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

Quelle

2017-03-07 21:34:20 Davide

Fortschrittsbalken animiere nicht

Antwort

Verwandte Themen