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。