Animated change transitions

README.md

@@ -120,6 +120,10 @@ Alternatively, instead of loading livereload.js from the LiveReload server, you
 <script src="https://github.com/livereload/livereload-js/raw/master/dist/livereload.js?host=localhost"></script>
 ```
 
+### Animated transitions
+
+LiveReload can animate changes. To enable animated transitions pass `animate=true` to `livereload.js` when including in the script tag. The default transition duration is 280ms and is configurable via `animation_duration`. The value is integer in milliseconds.
+
 
 Issues & Limitations
 --------------------

dist/livereload.js

@@ -385,19 +385,31 @@
     LiveReload.prototype.performReload = function(message) {
       var _ref, _ref1;
       this.log("LiveReload received reload request: " + (JSON.stringify(message, null, 2)));
-      return this.reloader.reload(message.path, {
+      this.reloader.reload(message.path, {
         liveCSS: (_ref = message.liveCSS) != null ? _ref : true,
         liveImg: (_ref1 = message.liveImg) != null ? _ref1 : true,
         originalPath: message.originalPath || '',
         overrideURL: message.overrideURL || '',
-        serverURL: "http://" + this.options.host + ":" + this.options.port
+        serverURL: "//" + this.options.host + ":" + this.options.port
       });
+      return this.performTransition();
     };
 
     LiveReload.prototype.performAlert = function(message) {
       return alert(message.message);
     };
 
+    LiveReload.prototype.performTransition = function() {
+      var existingHtmlClass, html, reloadedClass, _ref;
+      html = document.body.parentNode;
+      reloadedClass = ' livereload-reloaded ';
+      existingHtmlClass = (_ref = html.getAttribute('class')) != null ? _ref : '';
+      html.setAttribute('class', "" + (existingHtmlClass.replace(reloadedClass, '')) + " " + reloadedClass);
+      return setTimeout((function() {
+        return html.setAttribute('class', existingHtmlClass.replace(reloadedClass, ''));
+      }), parseInt(this.options.animation_duration, 10) + 20);
+    };
+
     LiveReload.prototype.shutDown = function() {
       var _base;
       this.connector.disconnect();
@@ -450,6 +462,24 @@
       });
     };
 
+    LiveReload.prototype.setUpCSSTransitions = function() {
+      var cssText, head, prefixer, styleNode;
+      prefixer = function(declaration) {
+        return (['-webkit-', '-moz-', ''].map(function(item) {
+          return "" + item + declaration;
+        })).join(' ');
+      };
+      head = document.getElementsByTagName('head')[0];
+      styleNode = document.createElement("style");
+      cssText = ".livereload-reloaded * { " + (prefixer('transition: all ' + this.options.animation_duration + 'ms ease-out;')) + " }";
+      if (styleNode.styleSheet) {
+        styleNode.styleSheet.cssText = cssText;
+      } else {
+        styleNode.appendChild(document.createTextNode(cssText));
+      }
+      return head.appendChild(styleNode);
+    };
+
     return LiveReload;
 
   })();
@@ -470,6 +500,8 @@
       this.mindelay = 1000;
       this.maxdelay = 60000;
       this.handshake_timeout = 5000;
+      this.animate = false;
+      this.animation_duration = 280;
     }
 
     Options.prototype.set = function(name, value) {
@@ -1095,6 +1127,9 @@
   });
 
   LiveReload.on('connect', function() {
+    if (!!/true|1$/.test(LiveReload.options.animate)) {
+      LiveReload.setUpCSSTransitions();
+    }
     return CustomEvents.fire(document, 'LiveReloadConnect');
   });
 

src/livereload.coffee

@@ -82,10 +82,19 @@ exports.LiveReload = class LiveReload
       originalPath: message.originalPath || ''
       overrideURL: message.overrideURL || ''
       serverURL: "http://#{@options.host}:#{@options.port}"
+    @performTransition() if !!(/true|1$/).test(LiveReload.options.animate)
 
   performAlert: (message) ->
     alert message.message
 
+  performTransition: ->
+    html = document.body.parentNode
+    reloadedClass = ' livereload-reloaded '
+    existingHtmlClass = html.getAttribute('class') ? ''
+    html.setAttribute('class', "#{existingHtmlClass.replace(reloadedClass, '')} #{reloadedClass}")
+    setTimeout (-> html.setAttribute('class', existingHtmlClass.replace(reloadedClass, ''))),
+      parseInt(@options.animation_duration, 10) + 20
+
   shutDown: ->
     @connector.disconnect()
     @log "LiveReload disconnected."
@@ -143,3 +152,19 @@ exports.LiveReload = class LiveReload
 
     @connector.sendCommand { command: 'info', plugins: pluginsData, url: @window.location.href }
     return
+
+  setUpCSSTransitions: ->
+    prefixer = (declaration) ->
+      (['-webkit-', '-moz-', ''].map (item) -> ("#{item}#{declaration}")).join(' ')
+
+    head = document.getElementsByTagName('head')[0]
+    styleNode = document.createElement("style")
+    cssText = ".livereload-reloaded * { #{prefixer('transition: all ' +
+      @options.animation_duration + 'ms ease-out;')} }"
+
+    if styleNode.styleSheet
+      styleNode.styleSheet.cssText = cssText
+    else
+      styleNode.appendChild(document.createTextNode(cssText))
+
+    head.appendChild(styleNode)

src/options.coffee

@@ -11,6 +11,9 @@ exports.Options = class Options
     @maxdelay = 60000
     @handshake_timeout = 5000
 
+    @animate  = false
+    @animation_duration = 280 # ms
+
   set: (name, value) ->
     if typeof value is 'undefined'
       return

src/startup.coffee

@@ -8,6 +8,7 @@ LiveReload.addPlugin require('./less')
 
 LiveReload.on 'shutdown', -> delete window.LiveReload
 LiveReload.on 'connect', ->
+  LiveReload.setUpCSSTransitions() if !!(/true|1$/).test(LiveReload.options.animate)
   CustomEvents.fire document, 'LiveReloadConnect'
 LiveReload.on 'disconnect', ->
   CustomEvents.fire document, 'LiveReloadDisconnect'

test/html/animation/test.css

@@ -0,0 +1,3 @@
+body {
+    background: green;
+}

test/html/animation/test.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>LiveReload Test</title>
+    <link rel="stylesheet" href="test.css">
+</head>
+<body>
+    <h1>Test animated transitions</h1>
+    <script src="../../../dist/livereload.js?host=localhost&amp;animation=true" async defer></script>
+</body>
+</html>