Как потушить сообщения об успехах Django, используя Javascript или CSS? - PullRequest
Новая
       23

Как потушить сообщения об успехах Django, используя Javascript или CSS?

1 голос
/ 30 октября 2019

Я пытаюсь потушить сообщения об успехах Django с помощью небольшого скрипта Javascript, но не могу заставить его работать. Это у меня 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>

1 Ответ

2 голосов
/ 30 октября 2019

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 подобно animate.css , которые обеспечивают набор удивительных переходов по тому же принципу.

Только будьте осторожны, не используйте их слишком много, вы не хотите, чтобы ваше приложение выглядело как рождественская елка ?.

...