如何更改 Twitter Bootstrap 中警报消息的淡入淡出速度？

Posted 2023-02-22

【中文标题】如何更改 Twitter Bootstrap 中警报消息的淡入淡出速度？

【英文标题】：How can I change the speed of the fade for alert messages in Twitter Bootstrap?

【发布时间】：2012-05-13 13:15:41

【问题描述】：

我正在使用 twitter 引导程序，并且警报框上关闭的淡入淡出发生的速度比我想要的要快。有没有什么地方可以改变淡入淡出的持续时间，甚至可以根据警报设置它？

谢谢

【问题讨论】：

你查看过 bootstrap-transition.js 吗？ twitter.github.com/bootstrap/javascript.html#tooltips

【参考方案1】：

它实际上在 component-animations.less（第 5 行）中使用了.transition(opacity .15s linear);。

如果您查看 bootstrap-alert.js 的第 64 行，您可以看到它在哪里引用了该类。将 .15s 更改为您想要的样子，您应该一切顺利。

【讨论】：

谢谢，这是我要找的文件。 _component-animations.scss 就我而言。

【参考方案2】：

丹·赫尔曼，

如果你不使用 less 并且你想编辑 bootstrap.css 你可以尝试编辑这个并且不要乱用 .js 文件。

编辑

 .fade 
   opacity: 0;
   -webkit-transition: opacity 0.25s linear;
      -moz-transition: opacity 0.25s linear;
       -ms-transition: opacity 0.25s linear;
        -o-transition: opacity 0.25s linear;
           transition: opacity 0.25s linear;
 

把它变成……

 .fade 
   opacity: 0;
   -webkit-transition: opacity 1.25s linear;
      -moz-transition: opacity 1.25s linear;
       -ms-transition: opacity 1.25s linear;
        -o-transition: opacity 1.25s linear;
           transition: opacity 1.25s linear;
 

1.25s 不是默认值，这只是一个例子，如果你应用它，你会真正注意到效果和区别。

现在，如果您想创建另一个淡入淡出选择器的变体，比如说“myFade”，那么我认为您需要修改 bootstrap-alert.js 并添加新的类选择器或“myFade”类选择器。

我还不知道javascript。我只是认为你需要修改 bootstrap-alert.js 并插入你的新类。

【讨论】：

.35 如果您希望能够快速单击标签，我发现这是最好的使用价值。

【参考方案3】：

对于使用 bootstrap 4 的我来说，只需在我的自定义 style.css 中添加这些行就足够了。

.show 
    transition: opacity 100ms; // You can play with the 1