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>

显然我没有将 data-bar-length 定义为 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。