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

Question

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

谢谢

Answer 1

丹·赫尔曼，

如果你没有使用 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 is not the default value, that's is just an example and if you apply that, you'll really notice the effect and the difference.

Now, if you want to create another variant of the fade selector, lets say, "myFade", then I think you need to modify the bootstrap-alert.js and add your new class selector or "myFade" class selector.

I don't know yet about javascript. I just thought you need to modify the bootstrap-alert.js and insert your new class.

Answer 2

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

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

Answer 3

For me on bootstrap 4, just adding these lines in my custom style.css was good enough.

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