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

Question

使用 rails、bootstrap 和我的用户身份验证构建 Web 应用程序是使用 Devise。

我能够显示 Devise 的“用户已登录”和“用户已注销”警报/通知，但它们在页面上保持静态并且看起来不太好。有没有办法让这些警报淡入/淡出，但最重要的是淡出？

我尝试过使用 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 类/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>