为什么在按钮未悬停时不会发生图标转换？

Question

我想添加一种效果，当鼠标悬停在按钮上时，图标会平滑地出现和消失。悬停按钮时不会出现任何问题，但与其他效果不同的是，它仅以一种方式起作用。

注意：我使用了 Ionicons，但问题仍然存在于其他几个图标库中。

button {
  font-size: 20px;
  transition: 0.2s;
  overflow: hidden;
}

.buttonicon {
  position: relative;
  font-size: 25px;
  margin-bottom: -6px;
  left: 100%;
  width: 0;
}

button:hover .buttonicon {
  transition: 1s;
  left: 0;
  width: 20px;
}

<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<button>
  Button Text
  <ion-icon class="buttonicon" name="chevron-forward-outline"></ion-icon>
</button>

Answer 1

改变你的css，你可以添加

transition: 1s

到 .buttonicon 而不是 :hover 选择器。这样，转换属性将应用于所有与按钮相关的转换，因此您将获得“平滑”效果。

Answer 2

这很简单而不是在 button:hover .buttonicon 上添加 Transition Property class 在 buttonicon 上应用过渡，您的最终输出将如下所示。

.buttonicon {
  position: relative;
  font-size: 25px;
  margin-bottom: -6px;
  left: 100%;
  width: 0;
  transition: 1s;
}

button:hover .buttonicon {
  left: 0;
  width: 20px;
}

为什么在按钮未悬停时不会发生图标转换？

Why does having a transition for a icon not occur when the button is unhovered?

html

css

css-transitions