动画内联样式返回初始状态

Question

我已经实现了一个CSS解决方案来设置与guidance from CSS-Tricks内联设置的样式的动画。还使用help from SO将文本与CSS混合

我有标签的动画双向（加载和重置）但进度条本身立即变为零

div的宽度内联设置如下：

<div class="progress-black" ng-style="{width:progress}"></div>

onload动画很简单

.progress-black {
    background: black;
    animation: progress-bar .5s linear;
    z-index: 2;
}

@keyframes progress-bar {
   0% { width: 0; }
}

Here is my jsfiddle

似乎@keyframe动画需要100％的值，这是动态设置的，因此不确定如何在CSS中表达。

我的特定应用可以让用户点击重置＆＃39;。有没有办法让动画回到0？

Answer 1

您的代码中几乎没有问题，有两种解决方案：

第一个解决方案： - 以及更好的解决方案

1. 在你的情况下不需要使用动画，如果你使用transition: width 2s;就足够了 - 你应该这样做。

2. 您检查if (scope.value)的值是否“存在”以及重置进度宽度时保持不变

3. 您添加了.zero类的颜色

see here

第二个解决方案：

1 ..在你的情况下，没有必要使用动画，如果你使用transition: width 2s;就足够了 - 你应该这样做。

2 ..如果你有zero类设置.progress-black { width: 0 !important; }所以宽度将为0（很重要，因为你希望它比内联css更强）。

see here