为什么尽管仅在正常状态下指定了转换仍适用于活动状态

Question

我应用于正常状态的转换正在应用于活动状态上的箭头。请注意，单击按钮时，箭头.3s 从白色变为与其余活动状态相同的颜色。如何在保持悬停按钮背景的过渡的同时从箭头的活动状态中删除此过渡？

我尝试从.btn 中删除transition: all .3s，但这也消除了悬停状态背景颜色延迟。我想保留这个。

body {
  background: #00b894;
}

.btn {
  color: #fff;
  padding: 0 60px;
  height: 64px;
  border: 3px solid #fff;
  line-height: 58px;
  background: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  outline: none;
  transition: all .3s;
  /* This is causing a transition on the arrow's active state */
}

.btn:hover {
  background: #009E7E;
}

.btn:active {
  border-color: #008066;
  color: #008066;
}

.btn:before {
  position: absolute;
  transition: all 0.3s;
  top: 50%;
  transform: translateY(-50%);
}

.btn--continue:before {
  left: 130%;
}

.btn--continue:hover:before {
  left: 80%;
}

.icon-arrow-right:before {
  content: "→";
}

<button class="btn btn--continue icon-arrow-right">Continue</button>

我希望白色箭头立即变成与其余活动状态相同的颜色。基本上，删除 .3s 过渡。但是，我想保持悬停按钮背景延迟。

Answer 1

将您的转换设置为：transition: background .3s;