web-dev-qa-db-fra.com

Animation de la largeur de la barre de progression Bootstrap avec jQuery

Je souhaite animer la largeur d'une barre de progression de 0% à 70% en 2,5 secondes. Toutefois, le code ci-dessous modifie immédiatement la largeur à 70% après un délai de 2,5 secondes. Qu'est-ce que je rate?

$(".progress-bar").animate({
    width: "70%"
}, 2500);

JSFiddle:http://jsfiddle.net/WEYKL/

javascriptjquerytwitter-bootstrapjquery-animateprogress-bar
18
user3088077

Le problème est dans l'effet de transition Bootstrap par défaut, qui anime toute mise à jour de la propriété width.

Si vous l’éteignez en supprimant le style correspondant, cela fonctionnera correctement, par exemple:

.progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

DEMO:http://jsfiddle.net/WEYKL/1/

33
VisioN

C'EST TRÈS FACILE si utilise la barre de progression du bootstrap,

ajoutez seulement attrib aria-valuenow = "percent_required%" pour div avec la classe "progress-bar" comme ceci:

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57%" aria-valuemin="0" aria-valuemax="57">

Ensuite, sur le script:

<script>
  $(document).on('ready',function(){
    $('.progress .progress-bar').css("width",function() {
      return $(this).attr("aria-valuenow") + "%";
    })
  })
</script>

Rechargez, partez!

3
uomo_perfetto

Il est donc plus logique d'ajuster l'effet de transition via CSS ou jQuery.

.progress-bar {
    -webkit-transition: width 2.5s ease;
    transition: width 2.5s ease;
}

Et changez simplement la valeur de la largeur.

$(".progress-bar").css('width', '70%');
2
daVe

Vous pouvez le réparer en ajoutant:

.progress .progress-bar {
  transition: unset;
}


var delay = 500;
$(".progress-bar").each(function(i) {
  $(this).delay(delay * i).animate({
    width: $(this).attr('aria-valuenow') + '%'
  }, delay);

  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: delay,
    // easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now) + '%');
    }
  });
});
.progress {
  margin-bottom: 20px;
}

.progress-bar {
  width: 0;
}

.bg-purple {
  background-color: #825CD6 !important;
}

.progress .progress-bar {
  transition: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Bootstrap 4 Progress Bars</h2>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70</div>
  </div>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
  </div>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-purple" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
  </div>
</div>

0
Yi-Ting Liu