1

当我更改 .btn 按钮的类时，我想为背景设置动画，例如从加载到 .btn-success 或 .btn-danger 的 .btn-primary 传递。

现在，如果我将 -webkit-transition: background 1s linear 添加到 .btn 类并使用 js 切换类，则更改不会动画

（兴趣点：我尝试仅在 chrome 元素检查工具中添加 css 过渡指令。）

任何的想法？

更新：如果按钮处于禁用模式，则转换工作，也许问题是由于使用 css3 渐变作为背景图像，而 -webkit-transition 可能不支持？

4

1 回答 1

1

我认为您在更新中确定了它。CSS 可以转换背景颜色和位置，但不能在渐变之间转换，这将需要为这些设置动画。

如果您有兴趣，这里有一个绝望的解决方法的想法：

  • 创建一个css3关键帧动画
  • 首先将背景位置设置为“0 -20px”（不一定是 -20px，但无论如何都会使渐变不碍事，因此您只能看到背景颜色）
  • 然后，将背景颜色设置为您想要的新背景颜色
  • 在为背景颜色设置动画的某个时间点，将渐变切换为您想要的新渐变。渐变不在视野范围内，因此在动画中看不到。
  • 最后，当背景颜色完成动画时，将背景位置动画回“0 0”。

如果你足够快地完成这一切，你可能会获得一个不错的效果。如果你试一试，我很想看看。

于 2012-09-10T18:23:53.353 回答