Added a CSS transition to the timestamp tooltip.

Author: drewblaisdell

public/css/main.css

@@ -337,6 +337,14 @@ html, body {
   width: 50px;
   text-align: center;
   padding: 4px 0;
+  margin-left: -10px;
+  -webkit-transition: opacity .25s ease-out, margin .25s ease-out;
+  transition: opacity .25s ease-out, margin .25s ease-out;
+}
+
+#timestamp-tooltip.active {
+  margin-left: 0;
+  opacity: 1;
 }
 
 #timestamp-tooltip:after {

public/js/chat.js

@@ -90,28 +90,30 @@ define([], function() {
   };
 
   Chat.prototype._handleMouseLeave = function(event) {
-    this.timestampEl.style.opacity = 0;
+    this.timestampEl.className = '';
   };
 
   Chat.prototype._handleMouseOver = function(event) {
     var timestamp = event.target.dataset.timestamp || event.target.parentElement.dataset.timestamp,
       chatMessageEl = (event.target.dataset.timestamp) ? event.target : event.target.parentElement;
 
     if (timestamp) {
-      this.timestampEl.style.opacity = 1;
+      if (this.timestampEl.className === '') {
+        this.timestampEl.className = 'active';
+      }
       this.timestampEl.innerHTML = timestamp;
 
       var timestampTop = chatMessageEl.offsetTop - this.chatLogEl.scrollTop - 3,
         timestampLeft = chatMessageEl.offsetLeft - 50;
 
       if (timestampTop < this.chatLogEl.offsetTop - 10) {
-        this.timestampEl.style.opacity = 0;
+        this.timestampEl.className = '';
       } else {
         this.timestampEl.style.top = chatMessageEl.offsetTop - this.chatLogEl.scrollTop - 3 + 'px';
         this.timestampEl.style.left = chatMessageEl.offsetLeft - 50 + 'px';
       }
     } else {
-      this.timestampEl.style.opacity = 0;
+      this.timestampEl.className = '';
     }
   };