Rails，JS，CSS-无法获得过渡效果

Question

I have bar charts in my application that work fine but i'd like them to transition left to right on load across the screen. So I have tried the following:

CSS:

.progress-meter-interest{
  background-color: #FFD733;
  width: 250px;
}

.progress-meter-interest.horizTranslate {
  animation-direction:normal;
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}

In view:

<div class="progress-meter-interest horizTranslate" style ="width: <%= homework.average_interest * 100 / 5 %>%"><%= homework.average_interest %></div>

JS:

<script>
$(document).ready(function() {
  $( ".progress-meter-interest" ).each(function() {
    var length = $( this ).data("bar-length");
    $( this ).css('width', length);
  });
});
</script>

Clearly I am not defining data-bar-length as a set value in the div as the graphs are dynamic. When I do define it the transition effect works.

How do I get it to work with the dynamic data?

Thanks. Appreciate any help.

Answer 1

The transition shorthand property needs to know which property to transition. At the very least you will need to change transition: 3s to transition: width 3s so your CSS should look like:

.progress-meter-interest{
  background-color: #FFD733;
  width: 250px;
}

.progress-meter-interest.horizTranslate {
  animation-direction:normal;
  -webkit-transition: width 3s;
  -moz-transition: width 3s;
  -ms-transition: width 3s;
  -o-transition: width 3s;
  transition: width 3s;
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/transition for more details on the transition property.