Rails、JS、CSS - トランジション効果の働きを得ることができません

Question

私のアプリケーションでうまくいく棒グラフを持っていますが、画面上で左から右への遷移を望みます。

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

：

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

私は、データバーの長さを定義していないですだから私は次のことを試してみましたdivの設定値は、グラフが動的なものであるためです。定義すると、トランジション効果が働きます。

ダイナミックデータを使用するにはどうすればよいですか？

ありがとうございました。助けをお待ちしています。

Answer 1

transition略語プロパティは、どのプロパティを遷移させるかを知る必要があります。非常に少なくとも、あなたはとてもあなたのCSSは次のようになりますtransition: width 3sにtransition: 3sを変更する必要があります：

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

transitionプロパティの詳細についてはhttps://developer.mozilla.org/en-US/docs/Web/CSS/transitionを参照してください。