类更改时引导动画按钮样式

Question

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

现在，如果我在 .btn 类中添加 -webkit-transition: background 1s linear 并使用 js 切换类，变化是没有动画的

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

有什么想法吗？

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

Answer 1

我认为你在更新中做到了。 CSS 可以转换背景颜色和位置，但不能在渐变之间进行转换，而渐变是动画所必需的。

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

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

如果你做这一切的速度足够快，你可能会取得不错的效果。如果你试一试，我很想看看。