Twitter Bootstrap警报可以淡入淡出吗？ [英] Can Twitter Bootstrap alerts fade in as well as out?

问题描述

当我第一次看到在Bootstrap中的警报，我认为他们会像模态窗口一样，下降或淡入，然后在关闭时淡出。但它似乎总是可见的。我想我可以让他们坐在我的应用程序上面的一层，并管理显示它们，但我想知道是否内置功能。<​​/ p>

谢谢！

编辑，到目前为止：

 < div id =saveAlert class =alert-message success fade indata-alert =alertstyle =top：0> 
< a class =closehref =＃>×< / a> 
< p>< strong>做得很好！< / strong>您已成功读取此提醒讯息。< / p> 
< / div> 
  

解决方案

我强烈不同意前面提到的大多数答案。

简短答案：

in类，并使用jQuery添加它来淡入它。

查看这个jsfiddle一个例子， a href =http://jsfiddle.net/QAz2U/3/> http://jsfiddle.net/QAz2U/3/

Long回答：

虽然这是真正的bootstrap本身不支持在警报中的淡入，大多数答案在这里使用jQuery fade函数，以使元素动画化（淡化）。这个的最大优点是跨浏览器兼容性。缺点是性能（另请参见： jQuery调用CSS3淡入淡出动画？） 。

Bootstrap使用CSS3转换，具有更好的性能。这对移动设备很重要：

Bootstraps CSS可以淡出警报：

  .fade {
 opacity：0; 
 -webkit-transition：opacity 0.15s linear; 
 -moz-transition：opacity 0.15s linear; 
 -o-transition：opacity 0.15s linear; 
 transition：opacity 0.15s linear; 
} 
 .fade.in {
 opacity：1; 
} 
  

为什么我认为这种表现如此重要？使用旧的浏览器和硬件的人可能会得到一个突然的过渡与jQuery.fade（）。对于具有现代浏览器的旧硬件也是如此。使用CSS3过渡的人使用现代浏览器将获得平滑的动画，即使使用旧的硬件，而使用旧的浏览器，不支持CSS转换的人将只是立即看到元素流行，我认为是一个更好的用户体验，而不是断续动画。

我来到这里寻找与上面相同的答案：淡入引导警报。在一些挖掘Bootstrap的代码和CSS之后，答案是相当简单的。不要在警报中添加in类。

HTML（注意类中没有） / strong>

 < div id =myAlertclass =alert success fadedata-alert =alert> ; 
<！ - 其余的警报代码在这里 - > 
< / div> 
  

Javascript ：

  function showAlert（）{
 $（＃myAlert）。addClass（in）
} 
  

调用上面的函数添加了in类，并使用CSS3转换在警报中淡化： - ）

另请参阅此jsfiddle使用超时的示例（感谢John Lehmann！）： http://jsfiddle.net/ QAz2U / 3 /

When I first saw the alerts in Bootstrap I thought they would behave like the modal window does, dropping down or fading in, and then fading out when closed. But it seems like they are always visible. I guess I could have them sit in a layer above my app and manage showing them but I was wondering if the functionality was built in?

thanks!

Edit, what I have so far:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

解决方案

I strongly disagree with most answers previously mentioned.

Short answer:

Omit the "in" class and add it using jQuery to fade it in.

See this jsfiddle for an example that fades in alert after 3 seconds http://jsfiddle.net/QAz2U/3/

Long answer:

Although it is true bootstrap doesn't natively support fading in alerts, most answers here use the jQuery fade function, which uses JavaScript to animate (fade) the element. The big advantage of this is cross browser compatibility. The downside is performance (see also: jQuery to call CSS3 fade animation?).

Bootstrap uses CSS3 transitions, which have way better performance. Which is important for mobile devices:

Bootstraps CSS to fade the alert:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

Why do I think this performance is so important? People using old browsers and hardware will potentially get a choppy transitions with jQuery.fade(). The same goes for old hardware with modern browsers. Using CSS3 transitions people using modern browsers will get a smooth animation even with older hardware, and people using older browsers that don't support CSS transitions will just instantly see the element pop in, which I think is a better user experience than choppy animations.

I came here looking for the same answer as the above: to fade in a bootstrap alert. After some digging in the code and CSS of Bootstrap the answer is rather straightforward. Don't add the "in" class to your alert. And add this using jQuery when you want to fade in your alert.

HTML (notice there is NO in class!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

Calling the function above function adds the "in" class and fades in the alert using CSS3 transitions :-)

Also see this jsfiddle for an example using a timeout (thanks John Lehmann!): http://jsfiddle.net/QAz2U/3/

这篇关于Twitter Bootstrap警报可以淡入淡出吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！