message-edit: Fade in message on update.

When a message update comes back from the server and replaces an
old message, it should fade in. There are two components to the fade:

1. The message fades in from opacity: 0 =>  1.
2. The "edited" text will transform from X: -10 => X: 0.

static/js/message_list_view.js

@@ -821,6 +821,7 @@ MessageListView.prototype = {
         this._maybe_format_me_message(message_container);
 
         var rendered_msg = $(this._get_message_template(message_container));
+        rendered_msg.addClass("fade-in-message");
         this._post_process_dom_messages(rendered_msg.get());
         row.replaceWith(rendered_msg);
 

static/js/ui.js

@@ -215,6 +215,12 @@ $(function () {
     $('#new_message_content').blur(function () {
         saved_compose_cursor = $(this).caret();
     });
+
+    // on the end of the modified-message fade in, remove the fade-in-message class.
+    var animationEnd = "webkitAnimationEnd oanimationend msAnimationEnd animationend";
+    $("body").on(animationEnd, ".fade-in-message", function () {
+        $(this).removeClass("fade-in-message");
+    });
 });
 
 exports.restore_compose_cursor = function () {

static/styles/zulip.css

@@ -131,6 +131,18 @@ p.n-margin {
     }
 }
 
+.fade-in-message {
+    animation-name: fadeInMessage;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
+.fade-in-message .message_edit_notice {
+    animation-name: fadeInEditNotice;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+}
+
 #unmute_muted_topic_notification .btn {
     background-color: transparent;
     border: 1px solid #444;
@@ -877,6 +889,60 @@ td.pointer {
     }
 }
 
+@-webkit-keyframes fadeInMessage {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes fadeInMessage {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInMessage {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeInEditNotice {
+    0% {
+        transform: translateX(-10px);
+    }
+    100% {
+        transform: translateX(0px);
+    }
+}
+
+@-moz-keyframes fadeInEditNotice {
+    0% {
+        transform: translateX(-10px);
+    }
+    100% {
+        transform: translateX(0px);
+    }
+}
+
+@keyframes fadeInEditNotice {
+    0% {
+        transform: translateX(-10px);
+    }
+    100% {
+        transform: translateX(0px);
+    }
+}
+
 .messagebox-bottom {
     height: 3px;
     background-color: #fff;