是否可以使用 Twitter Bootstrap 或 CSS 选择器淡出 Devise 警报？

Question

使用 rails、bootstrap 构建网络应用程序，我的用户身份验证使用 Devise。

我可以显示 Devise 'User Signed In' 和 'User Signed Out' alert/notices，但它们在页面上保持静态并且看起来不太好。有什么方法可以让这些警报消失 in/out，但最重要的是，消失吗？

我试过使用 bootstrap .fade .in 类但它们只会导致警报根本不出现。

      <% if notice.present? %>
        <p class="alert alert-info fade-in col-4 offset-4"><%= notice %></p>
      <% end %>
      <% if alert.present? %>
        <p class="alert alert-danger col-4 offset-4"><%= alert %></p>
      <% end %>

我希望能够使用简单的 Bootstrap classes/CSS 选择器使其工作，甚至一些 ruby 代码，但我一直无法想出还有什么。

Answer 1

我建议你使用 bootstrap toast。

.alert {
  animation: hideMe 10s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
@keyframes hideMe {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<p class="alert alert-info fade-in col-4 offset-4">test</p>

是否可以使用 Twitter Bootstrap 或 CSS 选择器淡出 Devise 警报？

Is it possible to fade out a Devise alert with Twitter Bootstrap or CSS selectors?

css

ruby

ruby-on-rails

devise

twitter-bootstrap