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

【问题标题】：Why does having a transition for a icon not occur when the button is unhovered?为什么在按钮未悬停时不会发生图标转换？
【发布时间】：2021-07-26 17:14:33
【问题描述】：

我想添加一种效果，当按钮悬停时，图标会出现并平滑消失。当按钮悬停时，效果不会出现任何问题，但与其他效果不同，它只能以一种方式工作。

注意：我使用了 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>

【问题讨论】：

因为您将transition 部分放在:hover 样式上。当元素不再悬停时，它没有transition。 transition 应该（通常）进入默认状态，所以在你的情况下是 .buttonicon。

标签： html css css-transitions

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

改变你的css，你可以添加

过渡：1s

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

【讨论】：