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

Question

我正在尝试为“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”上它从右到左消失，而我试图让线条也从左到右消失。

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>