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

Question

我已经实现了一个 CSS 解决方案来为与 guidance from CSS-Tricks 内联设置的样式设置动画。 .也用过help from SO让文本与 CSS 融合

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

div 的宽度内联设置如下:

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

而且加载动画很简单

.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.. 如果你有零 class set .progress-black { width: 0 !important; } 所以宽度将为 0(这很重要，因为你希望它比内联 css 更强大)。

see here