我已经实现了一个 CSS 解决方案来为与内联设置的样式设置动画CSS-Tricks 的指导 https://css-tricks.com/animate-to-an-inline-style/。还用过SO的帮助 https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color/25707161#25707161让文本与 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; }
}
这是我的jsfiddle https://jsfiddle.net/webedge/rsu5e44c/
这好像是@keyframe动画需要一个 100% 的值，该值是动态设置的，所以不知道如何在 CSS 中表达它。
我的特定应用程序可以让用户单击“重置”。有没有办法让动画恢复到0？
您的代码中几乎没有问题，有两种解决方案适合您：
第一个解决方案：- 以及更好的一个
在你的情况下，不需要使用动画，如果你会使用就足够了transition: width 2s;- 你应该这样做。
您检查该值是否“存在”if (scope.value)当您重置进度的宽度时，进度保持不变并且没有改变
你添加.zero那个颜色的类
see here https://jsfiddle.net/rsu5e44c/16/
第二种解决方案：
1..在你的情况下不需要使用动画，如果你会使用就足够了transition: width 2s;- 你应该这样做。
2..如果你有zero班级集.progress-black { width: 0 !important; }所以宽度将为0（很重要，因为你希望它比内联CSS更强）。
see here https://jsfiddle.net/rsu5e44c/15/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
