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

Question

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

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

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

有什么想法吗？

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

Answer 1

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

如果您有兴趣，可以采用绝望的解决方法：

• 创建css3关键帧动画
• 首先将背景位置设置为“0 -20px”（不一定是-20px，但不管是什么都会让渐变变得干净，所以你只能看到背景颜色）
• 然后，将背景颜色设置为您想要的新背景颜色
• 在您动画背景颜色的某个时刻，将渐变切换到所需的新渐变。渐变不在视野范围内，因此在动画中无法看到。
• 最后，当背景颜色完成动画制作后，将背景位置设置为“0 0”。

如果你这么快就做到了这一点，你可能能够取得不错的效果。如果你试一试，我很想看到它。