将内联样式动画化回初始状态

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 中表达。

我的特定应用可以让用户点击“重置”。有没有办法让动画回到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