Twitter Bootstrap 警报可以淡入淡出吗?

Posted

技术标签:

【中文标题】Twitter Bootstrap 警报可以淡入淡出吗?【英文标题】:Can Twitter Bootstrap alerts fade in as well as out? 【发布时间】:2011-12-02 08:17:03 【问题描述】:

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

谢谢!

编辑,我到目前为止:

<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>

【问题讨论】:

【参考方案1】:

这是一个非常重要的问题,我正在努力通过替换当前消息并添加新消息来完成(显示/隐藏)消息。

以下是工作示例:

function showAndDismissAlert(type, message) 

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() 
    $(this).remove();
  );

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

希望它能帮助其他人!

【讨论】:

【参考方案2】:

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

简答:

省略“in”类并使用jQuery添加它以使其淡入。

请参阅此 jsfiddle 以获取 3 秒后淡入警报的示例 http://jsfiddle.net/QAz2U/3/

长答案:

虽然确实 bootstrap 本身并不支持淡入淡出警报,但这里的大多数答案都使用 jQuery 淡入淡出功能,该功能使用 javascript 对元素进行动画(淡入淡出)。这样做的最大优势是跨浏览器兼容性。缺点是性能(另请参阅:jQuery to call CSS3 fade animation?)。

Bootstrap 使用 CSS3 过渡,具有更好的性能。这对移动设备很重要:

引导 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”类添加到您的警报中。当你想淡入警报时,使用 jQuery 添加它。

HTML(请注意类中没有!)

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

Javascript:

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

调用上面的函数会添加“in”类并使用 CSS3 过渡淡入警报:-)

另请参阅此 jsfiddle 以获取使用超时的示例(感谢 John Lehmann!):http://jsfiddle.net/QAz2U/3/

【讨论】:

Internet Explorer 不支持过渡属性,IE8 及以下不支持不透明度,您必须使用过滤器属性.. 所以任何想要使用这种方法的人,建议优雅降级。 好吧,它确实降级了。即不淡入或淡出。如果您真的需要褪色,那么引导方法不适合您。如果它只是为您的设计增加了一些额外的亮点,并且想要一个面向未来/移动的网站,请像我一样做:用漂亮的动画奖励用户现代浏览器,并为那些没有的人省略这些。而不是因为他们使用过时的硬件/软件而给他们可能不连贯/滞后的动画。 我在下面发布了一个替代答案。虽然,我同意这个答案最有利于性能,但我认为它会污染标记。尚不清楚 fadein 类是否关联。如标记class="alert alert-success fade in" 所示。 in 类看起来像一个完全独立的类,例如 alertalert-success。最好使用类名faded-in(而fade 应该是faded),过渡是暂时的,但类名仍然存在。 要在 Bootstrap 4 中进行这项工作,请使用 "show" 类而不是 "in"【参考方案3】:

我不同意 Bootstrap 使用 fade in 的方式(如他们的文档中所见 - http://v4-alpha.getbootstrap.com/components/alerts/),我的建议是避免使用类名 fadein,并避免这种情况一般的模式(目前在这个问题的最高评价答案中可以看到)。

(1) 语义错误 - 转换是暂时的,但类名仍然存在。那么我们为什么要把我们的类命名为fadefade in?应该是fadedfaded-in,这样当开发人员阅读标记时,很明显这些元素是fadedfaded-in。 Bootstrap 团队已经为hidden 取消了hide,为什么fade 有什么不同?

(2) 对单个转换使用 2 个类 fadein 会污染类空间。而且,尚不清楚fadein 是否相互关联。 in 类看起来像一个完全独立的类,例如 alertalert-success

最好的解决方案是在元素淡出时使用faded,并在元素淡入时用faded-in 替换该类。

警报消失

所以回答这个问题。我认为警报标记、样式和逻辑应该按以下方式编写。 注意:如果您使用的是原生 javascript,请随意替换 jQuery 逻辑

HTML

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

CSS

.faded 
  opacity: 0;
  transition: opacity 1s;

jQuery

$('#saveAlert .close').on('click', function () 

  $("#saveAlert")
    .addClass('faded');

);

【讨论】:

【参考方案4】:

我用这种方法在 3 秒后关闭淡入我的警报。希望对你有用。

    setTimeout(function()
    $('.alert').fadeTo("slow", 0.1, function()
        $('.alert').alert('close')
    );     
    , 3000)

【讨论】:

【参考方案5】:

当前的答案都不适合我。我正在使用 Bootstrap 3。

我喜欢 Rob Vermeer 的所作所为,并从他的回应开始。

对于一个淡入再淡出的效果,我只是用写了下面的函数并使用了jQuery:

在我的页面上添加 Html 以将警报添加到:

        <div class="alert-messages text-center">
        </div>

显示和关闭警报的Javascript函数。

function showAndDismissAlert(type, message) 
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function ()  $(this).remove(); );

然后,要显示和关闭警报,只需像这样调用函数:

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

作为旁注,我将 div.alert-messages 样式固定在顶部:

    <style>
    div.alert-messages 
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    
    </style>

【讨论】:

【参考方案6】:

对于 2.3 及以上版本,只需添加:

$(".alert").fadeOut(3000 );

引导:

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

适用于所有浏览器。

【讨论】:

优雅简洁,谢谢。我喜欢不需要写js的事实。有一种方法可以改变淡入淡出的行为,比如让淡入淡出更长的时间?【参考方案7】:

您可以使用 jquery 淡入一个框。使用 'hide' 类中内置的引导程序在 div 元素上有效地设置 display:none:

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

然后在jquery中使用fadeIn函数,像这样:

$("#saveAlert").fadeIn();

还有为fadeIn函数指定一个持续时间,例如: $("#saveAlert").fadeIn(400);

使用fadeIn函数的详细信息可以在官方jQuery文档网站上找到:http://api.jquery.com/fadeIn/

顺便说一句,如果您不使用 jquery,您可以将“隐藏”类添加到您自己的 CSS 文件中,或者将其添加到您的 div 中:

 <div style="display:none;" id="saveAlert">

然后你的 div 基本上会默认设置为隐藏,然后 jQuery 会执行fadeIn 动作,强制显示 div。

【讨论】:

这对我来说不会淡入警报消息,它只是显示它。 这在 Bootstrap 3 中将不再起作用 - 请参阅 Miscellaneous 下的 github.com/twbs/bootstrap/pull/6342【参考方案8】:

当然,是的。在你的项目中使用这个简单的文件:https://gist.github.com/3851727

首先像这样添加你的HTML:

<div id="messagebox" class="alert hide"></div>

然后使用:

$("#messagebox").message(text: "Hello world!", type: "error");

您可以将所有引导警报类型(例如errorsuccesswarning)作为选项传递给type 属性。

【讨论】:

【参考方案9】:

hide 类添加到alert-message。然后在你的 jQuery 脚本导入之后添加以下代码:

$(document).ready( function()
    $(".alert-message").animate( 'height':'toggle','opacity':'toggle');
    window.setTimeout( function()
        $(".alert-message").slideUp();
    , 2500);
);

如果要处理多条消息,此代码将按升序隐藏它们:

$(document).ready( function()
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) 
      window.setTimeout( function()
         $(el).slideUp();  // hide the message
      , hide_delay + hide_next*index);
   );
);

【讨论】:

【参考方案10】:

我用的是这个:

在您的模板中的警报区域

<div id="alert-area"></div>

然后是一个用于显示警报的 jQuery 函数

function newAlert (type, message) 
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function ()  $(this).remove(); );

newAlert('success', 'Oh yeah!');

【讨论】:

以上是关于Twitter Bootstrap 警报可以淡入淡出吗?的主要内容,如果未能解决你的问题,请参考以下文章

twitter bootstrap 的轮播淡入淡出过渡

如何在Twitter Bootstrap工具提示上启用淡入淡出效果?

如何使用 Twitter Bootstrap 自动关闭警报

Twitter Bootstrap 警报消息关闭并再次打开

css CSS Twitter Bootstrap警报框

Twitter Bootstrap modal:如何移除 Slide down 效果