Question

我有这个html的rails视图：

<body onload='<%= visual_effect(:appear, :main_counter, :duration=>3.0) %>'>  
  <div class="counter" id="main_counter">some content</div>
</body>

和样式表：

.counter{ 
  opacity:0;
}

效果按预期工作，但当它完成div的文本消失时，我猜测不透明度会回到0。如何让它保持完全不透明？

Answer 1

问题是，一旦完成，出现的效果会从元素中删除不透明度样式。最简单的解决方案是从样式表中删除opacity: 0;，并将其直接放在style="opacity: 0"的div上。由于内联样式，这有点难看。 Antoher解决方案是使用visual_effect调用中的：from选项，如下所示：

visual_effect(:appear, :main_counter, :duration=>3.0, :from => 0)

这样效果首先会将不透明度设置为0.但是，如果您的页面需要一段时间才能加载，那么在on_load事件被触发之前，div可能是可见的。

我很好奇，我从来没有偶然发现它，它让我有点烦恼，我想不出一个“好”的解决方案。