如何使用 Javascript 或 CSS 淡出 Django 成功消息？

Question

我正在尝试使用一个小的 Javascript 脚本淡出 Django 成功消息，但似乎无法使其正常工作。 这是在我的base.html中：

{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
    {{ message }}
</div>
{% endfor %}
{% endif %}

<script>
var m = document.getElementsByClassName("alert");

setTimeout(function(){
   m.style.display = "none";
}, 3000);
</script>

Answer 1

Django 仅呈现您的模板，并从服务器端返回 HTML 文件，然后您的浏览器需要使用 CSS219B9ED70FE2D7 处理该文件。 执行 animation 的一种简单方法是使用 CSS 转换。

CSS 过渡

<div class="alert alert-{{ message.tags }}">
    {{ message }}
</div>

.alert {
    positition: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
    transition: visibility 0s, opacity 250ms, transform 250ms;
}
.alert.hide {
    positition: relative;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px); // translateX, translateY, translateZ works well
    transition: visibility 0s 250ms, opacity 250ms, transform 250ms;
}

然后使用 Javascript 添加一个 class 到它：

<script>
var m = document.getElementsByClassName("alert");  // Return an array

setTimeout(function(){
   if (m && m.length) {
       m[0].classList.add('hide');
   }
}, 3000);
</script>

CSS animation 库

This is the verbose version which consist of writting your own animation and configure exactly as you need, but a simple solution could be to use a CSS animation library like animate.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ which provide a set of amazing transitions on the same principle.

请注意不要使用太多，您不希望您的应用程序看起来像一棵圣诞树。