【问题标题】：How to fade out Django success messages using Javascript or CSS?如何使用 Javascript 或 CSS 淡出 Django 成功消息？
【发布时间】：2019-10-30 10:57:16
【问题描述】：

我正在尝试使用一个小的 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>

【问题讨论】：

假设您的div 已经正确显示并且<script> 标签在源代码上，这不是一个Django 问题，而是一个Javascript 问题。
我觉得这肯定属于Django 标签，因为{{ template tag }} 被引用，但我删除它让你开心。
Django 只呈现您的模板，您正在寻找的是 CSS 动画/过渡，或 DOM 的 javascript 处理以更新它????。 m.style.display = "none"; 是否有效并隐藏 <div> ？
我没有意识到这可以用 CSS 来处理。人们通常是这样做的吗？
Django 标签本质上是复制/粘贴，它创建一个发送到客户端的文件，因此显示和淡化消息将在 JS 客户端完成。

标签： javascript html css css-transitions

【解决方案1】：

Django 仅呈现您的模板，并从服务器端返回一个 HTML 文件，然后您的浏览器需要使用 CSS 和 javascript 处理该文件。执行动画的一种简单方法是使用 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给它添加一个类：

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

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

CSS 动画库

这是包含编写自己的动画并完全按照您的需要进行配置的详细版本，但一个简单的解决方案可能是使用 CSS 动画库，如 @ 987654321@ 提供了一组基于相同原理的惊人转换。

注意不要使用太多，你不希望你的应用看起来像一棵圣诞树?。

【讨论】：

我不会撒谎；对于一项简单的任务来说，这似乎需要做很多工作。
它不是真的，当你知道它时，它需要很少的时间来写，而且它的级别非常低，所以定制完美。您可以使用像animate.css 这样的库，它基本上是一组即用型动画。