【问题标题】:bootstrap animate button style on class change类更改时引导动画按钮样式
【发布时间】:2012-08-25 13:00:06
【问题描述】:

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

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

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

有什么想法吗?

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

【问题讨论】:

    标签: javascript css twitter-bootstrap css-transitions


    【解决方案1】:

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

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

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

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

    【讨论】:

    • 巴卡堡:你试过了吗?
    • btn-primary down 和 btn-success up 会怎样?
    猜你喜欢
    • 1970-01-01
    • 2014-12-04
    • 1970-01-01
    • 2022-11-28
    • 2018-10-22
    • 1970-01-01
    • 1970-01-01
    • 2014-11-06
    • 1970-01-01
    相关资源
    最近更新 更多