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

Posted 2023-03-06

【中文标题】将内联样式动画化回初始状态

【英文标题】：animate inline style back to initial state

【发布时间】：2017-10-08 07:46:37

【问题描述】：

我已经实现了一个 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？

【参考方案1】：

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

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

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

你用if (scope.value)检查值是否“存在”，当你重置进度的宽度时保持不变

你添加了.zero这个颜色的类

see here

第二种解决方案：

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

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

see here

【讨论】：

感谢您的帮助！