Implement animated change transitions

Author: tyom

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
 --------------------

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'