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

Question

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

现在，如果我将-webkit-transition: background 1s线性添加到.btn类，并使用js切换类，则更改不是动态的

(有趣的是:我尝试只在chrome元素检查工具中添加css转换指令。)

有什么想法吗？

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

Answer 1

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

如果你感兴趣，这里有一个非常好的解决办法：

• 创建一个css3关键帧位置动画背景位置到"0 -20px“(不一定是-20px，但任何会得到渐变的方式，所以你只能看到背景颜色)
• 然后，动画背景颜色到你想要的新背景颜色
• 在动画的某个时候，渐变到你想要的新渐变。渐变不在视图中，因此当背景颜色完成动画处理后，在animation.
• Finally，中看不到渐变。请将背景位置动画设置回"0 0“。

如果你做得足够快，你也许能取得不错的效果。如果你试一试，我会很好奇的。