Refactored messages.js (#1852)

* Refactored `messages.js`

- Simplified code using a combination of CSS and JavaScript
- Stopped using jQuery
- Moved refactored code to `djangoproject.js`

This patch should bring no user-facing changes.

Refs #1827

* Use `transitionend` event instead of `setTimeout`

* Remove default `opacity` value

* Move `transition` rule to `fade-out` class

djangoproject/scss/_style.scss

@@ -3427,6 +3427,11 @@ ul.corporate-members li {
             margin-right: 10px;
         }
 
+        &.fade-out {
+            opacity: 0;
+            transition: opacity 400ms;
+        }
+
         &.info {
             &::before {
                 content: $fa-var-info-circle;

djangoproject/static/js/djangoproject.js

@@ -11,3 +11,14 @@ document.querySelectorAll('#doc-versions a').forEach(function (el) {
     this.href = this.href.split('#')[0] + window.location.hash;
   });
 });
+
+// Fade out and remove message elements when close icon is clicked
+document.querySelectorAll('.messages li .close').forEach(function (el) {
+  el.addEventListener('click', function (e) {
+    this.parentElement.addEventListener('transitionend', function (e) {
+      this.style.display = 'none';
+    });
+
+    this.parentElement.classList.add('fade-out');
+  });
+});

djangoproject/static/js/main.js

@@ -57,10 +57,6 @@ define(function () {
     mods.push('mod/corporate-member-join');
   }
 
-  if (hasClass('messages')) {
-    mods.push('mod/messages');
-  }
-
   if (hasClass('code-block-caption') || hasClass('snippet')) {
     mods.push('mod/clippify');
   }