Question

我有条形图的关键帧动画。宽度与样式属性（来自Razor）内联设置，动画工作正常，但我无法推迟它的开始。使用animation的延迟属性显示图表中的所有条形图，然后在1秒后隐藏并设置动画。我的目标是在动画运行之前不显示绿条。

我尝试动画不透明度，用jQuery切换动画css，直到动画运行才显示条形图，但似乎没有任何效果。

有什么想法吗？

<div class="bar" style="width: 80%"></div>

CSS

@keyframes graph-bar {
    0% {
        width: 0;
    }
}
.bar {
       background-color: green;
       height: 20px;
       cursor: pointer;
       animation: graph-bar 1s ease-out;
 }

更新

@Ankith的解决方案运作良好并指出了我正确的方向，但我能够使用jQuery所以我将使用这个更短的版本。显然，我show()和hide()只是needed to pass the duration。我还更新了这篇文章中的标签，因为我最初没有包含jQuery。

$('.bar').hide(0).delay(2000).show(0);

Answer 1

条形图默认显示内联样式的cos，如果使用jQuery，则必须等待jQuery资源在hide()或show()开始之前加载。

所以也许有些JS可能会很好。请根据需要进行清理。

JS Fiddle

var bar = document.getElementsByClassName("bar")

// hide all bars by default
for (var i = 0; i < bar.length; i++){
  bar[i].style.display = 'none';
}

// remove display none so the css animation kicks in
function reveal_bar() {
  for (var i = 0; i < bar.length; i++){
    bar[i].style.display = '';
  }
}

// settimeout to call function
setTimeout((reveal_bar), 1500)

CSS关键帧 - 延迟内联样式的动画

1 个答案: