如何防止图元在其动画被删除时捕捉回来？
如何防止图元在其动画被删除时捕捉回来？
提问于 2018-08-08 08:55:53
在我的UI中，有一个地方可以让用户提供输入。对于一些用户来说，它可能很难释放UI甚至在等待他们的输入，所以为了引起他们的注意，我有一个小提示箭头。
箭头从左侧进入，从左到右摆动，指向输入位置。
在用户至少提供了一次输入之后，他们就不需要动画了，所以我从父元素中删除了.emphasis类，从而删除了动画。
.options-block .hint-arrow {
height: 145px;
width: 217px; /* width of image */
background-image: url(highlight-arrow.png);
background-position: center;
position: absolute;
opacity: 1;
transition: transform 2s ease-in-out;
transform: translate(-165px,0);
}
.options-block.emphasis .hint-arrow {
animation: options-emphasis 3s ease-in 0s infinite alternate;
}
@keyframes options-emphasis {
0% {transform: translate(-92px,0);}
100% {transform: translate(-62px,0);}
}预期行为：当动画被移除时，箭头通过transition属性从其当前位置滑回其默认位置。
实际行为：箭头将捕捉回其默认位置。
这里我漏掉了什么？如何使元素向后滑动而不是靠回？
尽管我确实有可用的JS，但仅使用CSS的解决方案更受欢迎。
请注意:我不是在谈论停止动画，我是在谈论完全删除它- animation-fill-mode不是答案。
回答 1
Stack Overflow用户
发布于 2018-08-08 08:59:26
将forwards属性添加到动画选项
animation: options-emphasis 3s ease-in 0s infinite alternate forwards;
这将防止它捕捉回初始起点
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51737240
复制相关文章
相似问题