CSS动画-在鼠标输入上从左到右绘制线条，然后在鼠标左键上从左到右消失
CSS动画-在鼠标输入上从左到右绘制线条，然后在鼠标左键上从左到右消失
提问于 2019-04-10 00:57:45
我正试着在“mouseenter”上画一条从左到右下划线的动画，然后在“mouseleave”上从左到右消失，而不是从右到左消失。
我正在尝试实现的示例(但使用动画，而不是过渡)：
https://jsfiddle.net/1gyksyoa/
我试着反转“绘图”动画，但这并没有达到我想要实现的效果。
@keyframes draw-reverse {
100% {
width: 0;
background-color: red;
}
0% {
width: 47px;
background-color: red;
}
}我把这些放在一起是为了更好地理解这个问题；
https://jsfiddle.net/Lq560be9/
目前，我在'mouseenter‘上设置了从左到右的线条动画，但在'mouseleave’上，它从右到左消失了，而我正在尝试让线条也从左到右消失。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-10 07:51:02
但问题不在于动画的能力，而在于你要动画的属性。您应该使用translate设置其X位置的动画，而不是设置对象宽度的动画。(这也是更好的表现)
简单地说，您需要将栏从左到中再到右移动，而不是试图缩放它。
(这里有很多代码可以显示不同的状态，您真正需要遵循的唯一代码是.ex4)
document.querySelector('#animate').addEventListener('mouseenter', function(){
this.classList.toggle('over');
})
document.querySelector('#animate').addEventListener('mouseleave',function(){
this.classList.toggle('out');
}).example {
margin: 30px auto;
padding: 10px;
background: #dadada;
max-width: 50%;
position: relative;
}
.example:after {
content:'';
position: absolute;
width: 50%;
height: 5px;
background-color: #333;
left:0;
bottom:0;
}
.ex1:after {
transform: translateX(-100%);
}
.ex3:after {
transform: translateX(200%);
}
.ex4 {
overflow: hidden;
}
.ex4:after {
transform: translateX(-100%);
}
.ex4.over:after {
animation: animate-in 1s ease-in-out 1 normal forwards;
}
.ex4.out:after {
animation: animate-out 1s ease-in-out 1 normal forwards;
}
@keyframes animate-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes animate-out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}<div class="example ex1">Object State 1</div>
<div class="example ex2">Object State 2</div>
<div class="example ex3">Object State 3</div>
<div id="animate" class="example ex4">Full example (hover)</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55597782
复制相关文章
相似问题