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速記屬性需要知道要轉換的屬性。至少，你需要改變transition: 3s到transition: width 3s所以你的CSS應該是這樣的：

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