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。

Rails，JS，CSS - 无法实现过渡效果

1 个答案: