在角度引导时尝试显示微光效果，但动画卡住了
在角度引导时尝试显示微光效果，但动画卡住了
提问于 2019-10-29 17:12:10
我试图在启动angular (第一次加载)时显示facebook的闪光效果，但动画在第二个+之后卡住/停止-代码不能包含angular代码，只能包含css & html & js，因为它在angular之前运行。
我正在使用这个css & html-
.shine {
background: #f6f7f8;
background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 104px;
display: inline-block;
position: relative;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
box {
height: 104px;
width: 100px;
}
keyframes placeholderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}Html：
<ngx-application>
<div class="box shine"></div>
</ngx-appliaction>我认为问题出在动画背景位置上。当我尝试动画其他属性(平移、缩放、旋转等)时，动画效果非常好。具有缩放比例的元素不断缩放，但具有背景位置动画的元素被卡住了。如果我在同一个元素上组合动画缩放和背景位置，它也会被卡住。
此外，当我在angular的自举之后运行动画时，仅在一个随机组件上，动画就会无限地工作。我试着在网上搜索，但我仍然一无所知。谢谢您的支持。
回答 1
Stack Overflow用户
发布于 2019-10-29 17:17:10
在您的初始BootStrap之后，在Angular中运行动画，但更改CSS文件或创建您自己的"shine"类，但更改：
animation-iteration-count: infinite; 至
animation-iteration-count: 1;这会让它无限停止运行，因为根据你的帖子，这似乎不是你想要的行为。此外，如果您不想重新创建整个类，实际上也不必重新创建，只需覆盖此特定属性即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58604311
复制相关文章
相似问题
腾讯云开发者
