bootstrap在类更改时动画按钮样式

bootstrap animate button style on class change

本文关键字：动画 按钮 样式 bootstrap      更新时间：2023-09-26

当我更改.btn按钮的类别时，我想设置背景动画，例如从加载的.btn主按钮传递到.btn成功或.btn危险。

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

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

知道吗？

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

我想你在更新中已经搞定了。CSS可以转换背景颜色和位置，但不能在渐变之间转换，这将是动画化所必需的。

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

  • 创建css3关键帧动画
  • 首先将背景位置设置为"0-20px"（不一定是-20px，但不管怎样，都可以使渐变不受影响，这样你只能看到背景颜色）
  • 然后，将背景色设置为所需的新背景色
  • 在设置背景颜色动画时，将渐变切换到所需的新渐变。渐变在视图之外，因此在动画中看不到它
  • 最后，当背景颜色完成设置动画时，将背景位置设置回"0 0"的动画

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

相关文章：