有没有可能用Twitter Bootstrap或CSS选择器淡出一个巧妙的提醒？

Question

使用rails、bootstrap和我的用户身份验证来构建web应用程序就是使用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>

​