CSS动画 - 在mouseenter上从左到右绘制线条,然后在mouseleave上从左到右消失

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (130)

我试图在'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'上它从右到左消失,而我试图让这条线也从左到右消失。

提问于
用户回答回答于

但问题不在于动画的能力,而是你正在制作动画的属性。您应使用动画设置“X”位置,而不是设置对象宽度的动画translate。(这也更高效)

简单地说,您需要从左到右移动条形,而不是尝试缩放它。

(这里有很多代码来显示不同的状态,你真正需要遵循的唯一一个是.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>

扫码关注云+社区

领取腾讯云代金券