按钮悬停效果使用:after元素 - 鼠标移出按钮范围时进行动画退场

Question

按钮悬停效果使用:after元素 - 鼠标移出按钮范围时进行动画退场

3

我定义了这个按钮动画：JSFIDDLE

这里还包括代码：

HTML

<button>Hover to change color</button>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

@keyframes mymove {
    0% {width: 0%}
    100%  {width: 80%}
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  margin: auto;
  background-color: $blue;
  border: 1px solid $blue;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  position: relative;
   &:hover {
    &:after {
      content: "";
      position: absolute;
      bottom: 3px;
      width: 80%;
      height: 2px;
      background-color: white;
      left: 0;
      right: 0;
      margin: auto;
      animation-name: mymove;
      animation-duration: .5s;
     }
  }
}

这是一个简单的悬停动画。问题在于当鼠标离开按钮时，:after元素会消失。我想让鼠标离开时也能以动画方式将:after元素移除，应该怎么做呢？

我需要修改关键帧来包含相反的方向吗？100%到0%？还是其他完全不同的方法？

编辑：

与这个问题的不同之处在于我需要从按钮中访问after元素。我已经尝试了以下代码：

@keyframes mymove-out {
    from {&:after {
      width: 80%
      }}
    to  {&:after {
      width: 0
    }}
}

并将其应用于按钮。

animation: mymove-out .5s ease;

但是这样不起作用。我如何从关键帧访问after元素？

- Jonas Praem

我认为仅通过CSS动画无法实现这一点。当内部动画仍在运行时，您可以通过将鼠标移出来测试它，您会遇到相同的问题。取而代之的是，在按钮中添加一个高度为2px的span并使用JavaScript动画宽度，使按钮位置相对。 - vssadineni

让这个 span 绝对定位。 - vssadineni

可能是重复的问题，与如何在鼠标悬停后在鼠标移出时反转动画相关。 - Corné

@Corne 不同之处在于我需要从父元素/按钮中访问后续元素。这个线程在定义按钮本身的退出动画上有一点道理。-已经过了一半的路程 - Jonas Praem

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您可以通过添加背景颜色和过渡效果来简化您的代码：

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  border: 1px solid #0084ff;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background:
   linear-gradient(#fff,#fff) 50% calc(100% - 3px) no-repeat,
   #0084ff;
  background-size:0% 2px;
  transition:.5s all;
   
}

button:hover {
  background-size:80% 2px;
}

<button>Hover to change color</button>