使内联样式动画化回到初始状态 [英] animate inline style back to initial state

问题描述

我已经实现了CSS解决方案，以使与 CSS技巧指南。还使用了 SO的帮助与CSS混合文本

I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS

我使标签的动画双向移动（在加载和重置时），但是进度条本身立即变为零

I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero

div 的宽度设置为如下内联：

The width of the div gets set inline like this:

<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; }
}

这是我的jsfiddle

好像是 @keyframe 动画需要100％的值，该值是动态设置的，所以不确定如何在CSS中表达它。

It seems like @keyframe animations need a 100% value, which is set dynamically, so not sure how to express that in CSS.

我的特定应用可以让用户点击重启'。有没有办法使动画恢复为0？

My particular app has the ability for a user to click 'reset'. Is there a way to have the animation happen back to 0?

推荐答案

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

You have few problems in your code and there is two solutions for you:

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

1. 无需使用动画，如果您要使用 transition：width 2s; -并且应该这样做，就足够了。

1. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.

您用 if（scope.value）检查值 exist是否存在，并且在重置进度宽度时是否保持原样且未更改

you checking if the value "exist" with if (scope.value) and when you reset the width of the progress remain as it was and not changed

您添加了 .zero 上色的类

在这里看到

第二个解决方案：

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

1.. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.

2 ..如果您将零类设置为 .progress-b缺乏{width：0！important; } ，因此宽度将为0（重要，因为您希望它比内联CSS更强）。

2.. if you have zero class set .progress-black { width: 0 !important; } so the width will be 0 (important because you want it to be stronger then the inline css).

在这里看到

这篇关于使内联样式动画化回到初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！