我正试着在“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’上,它从右到左消失了,而我正在尝试让线条也从左到右消失。
发布于 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>
https://stackoverflow.com/questions/55597782
复制相似问题