Question

我正在尝试为在'mouseenter'上从左到右下划线的线设置动画，然后在'mouseleave'上从左到右消失的线，而不是从右到左消失的当前行为。

我要实现的示例（但动画没有过渡）：

我试图反转“绘制”动画，但这并没有达到我想要完成的目标。

        @keyframes draw-reverse {
      100% {
        width: 0;
        background-color: red;
      }

      0% {
        width: 47px;
        background-color: red;
      }

}

我将其汇总以更好地理解问题；

https://jsfiddle.net/Lq560be9/

当前，我在'mouseenter'上根据需要从左到右设置了动画线，但是在'mouseleave'上它从右到左消失了，而我试图使该线也从左到右消失。 / p>

Answer 1

但是问题不是动画的功能，而是您要设置动画的属性。而不是为对象的宽度设置动画，应使用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>

Answer 2

接下来，请使用替代属性不使用的另一种解决方案。

mouseleave的新动画是;

@keyframes draw-reverse {

  0% {
    width: 47px;
  }

  25% {
    width: calc(100% - 16px);
  }
  26% {
    width: auto;
    right: 8px;
    left: 8px;
  }

  100% {
    width: auto;
    right: 8px;
    left: calc(100% - 8px);
  }
}

完整的解决方案在这里可以看到-https://jsfiddle.net/1wq25tg7/

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

2 个答案: