Fade out ephemeral messages

sass/_core.scss

@@ -385,8 +385,6 @@ body.converse-fullscreen {
         75%  {background-color: rgba(255, 181, 162, 0.25);}
         100% {background-color: transparent;}
     }
-
-
     @keyframes fadein {
         0% { opacity: 0 }
         100% { opacity: 1 }
@@ -395,15 +393,14 @@ body.converse-fullscreen {
         0% { opacity: 0 }
         100% { opacity: 1 }
     }
-
     @-webkit-keyframes fadeOut {
-		 0% { opacity: 1; visibility: visible; }
-		 100% { opacity: 0; visibility: hidden;  }
-	} 
+        0% { opacity: 1; visibility: visible; }
+        100% { opacity: 0; visibility: hidden;  }
+    }
     @keyframes fadeOut {
-		 0% { opacity: 1; visibility: visible; }
-		 100% { opacity: 0; visibility: hidden;  }
-	} 
+        0% { opacity: 1; visibility: visible; }
+        100% { opacity: 0; visibility: hidden;  }
+    }
 
     .fade-in {
         @include fade-in;
@@ -423,10 +420,10 @@ body.converse-fullscreen {
     }
 
     .fade-out {
-		animation-duration: 1s;
-		animation-fill-mode: forwards;  
-		animation-name: fadeOut;
-		animation-timing-function: ease-in-out;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+        animation-name: fadeOut;
+        animation-timing-function: ease-in-out;
     }
 
     .collapsed {

src/converse-chatboxviews.js

@@ -72,7 +72,8 @@ converse.plugins.add('converse-chatboxviews', {
         // Refer to docs/source/configuration.rst for explanations of these
         // configuration settings.
         _converse.api.settings.update({
-            'theme': 'default',
+            'animate': true,
+            'theme': 'default'
         });
 
         _converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin);

src/converse-message-view.js

@@ -97,7 +97,7 @@ converse.plugins.add('converse-message-view', {
                     this.debouncedRender();
                 });
                 this.model.on('change', this.onChanged, this);
-                this.model.on('destroy', this.remove, this);
+                this.model.on('destroy', this.fadeOut, this);
             },
 
             async render () {
@@ -140,11 +140,24 @@ converse.plugins.add('converse-message-view', {
                 }
             },
 
+            fadeOut () {
+                if (_converse.animate) {
+                    this.el.addEventListener('animationend', () => this.remove(), {'once': true});
+                    u.addClass('fade-out', this.el);
+                } else {
+                    this.remove();
+                }
+            },
+
             onMessageEdited () {
                 if (this.model.get('is_archived')) {
                     return;
                 }
-                this.el.addEventListener('animationend', () => u.removeClass('onload', this.el));
+                this.el.addEventListener(
+                    'animationend',
+                    () => u.removeClass('onload', this.el),
+                    {'once': true}
+                );
                 u.addClass('onload', this.el);
             },