Question

我已经包含一个jsfiddle来简化这个。问题是，当鼠标悬停在箭头上时，转换不会按预期动画。

.spotlight-next {
  transition: background 0.5s ease-out;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

.spotlight-next:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}

https://jsfiddle.net/yashiman/jqq3u1nz/2/

Answer 1

linear-gradient的作用类似于background-image，以及如何阅读here， background-image不是动画 。

这很明显，因为没有一种标准方法可以动画background-image。您可能希望使用淡入效果或使用向左滑动效果为其设置动画，这是不明显的，我不明白为什么你说它没有工作“按预期”。有什么期待？

您应该利用其他属性设置转换，例如opacity或width。

这是使用background-image伪元素在::after属性上实现淡入淡出效果的简单方法：

.spotlight-next::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease-out;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  opacity: 0.1;
  z-index: -1;
}
.spotlight-next:hover::after {
  opacity: 1;
}

从transition移除background-image和.spotlight-next属性，以使其正常运行。

为什么过渡属性不适用于此线性渐变？

1 个答案: