livereload · tyom · Jan 22, 2015 · Jan 22, 2015 · Jan 22, 2015 · Jan 24, 2015
diff --git a/README.md b/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 configurable when an integer is passed as value to `animate`, e.g. `animate=400` (in milliseconds).
+
 
 Issues & Limitations
 --------------------

diff --git a/src/livereload.coffee b/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 @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.animate, 10)
+
   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.animate + 'ms ease-out;')} }"
+
+    if styleNode.styleSheet
+      styleNode.styleSheet.cssText = cssText
+    else
+      styleNode.appendChild(document.createTextNode(cssText))
+
+    head.appendChild(styleNode)
diff --git a/src/options.coffee b/src/options.coffee
@@ -11,13 +11,19 @@ exports.Options = class Options
     @maxdelay = 60000
     @handshake_timeout = 5000
 
+    @animate = false  # true or value in milliseconds, e.g. 420
+
   set: (name, value) ->
     if typeof value is 'undefined'
       return
 
     if not isNaN(+value)
       value = +value
 
+    if name == 'animate'
+      value = 280 if value is 'true'  # default animation duration
+      return if !/true|^\d+$/.test(value)
+
     @[name] = value
 
 Options.extract = (document) ->

diff --git a/src/startup.coffee b/src/startup.coffee
@@ -8,6 +8,7 @@ LiveReload.addPlugin require('./less')
 
 LiveReload.on 'shutdown', -> delete window.LiveReload
 LiveReload.on 'connect', ->
+  LiveReload.setUpCSSTransitions() if LiveReload.options.animate
   CustomEvents.fire document, 'LiveReloadConnect'
 LiveReload.on 'disconnect', ->
   CustomEvents.fire document, 'LiveReloadDisconnect'

diff --git a/test/html/animation/test.css b/test/html/animation/test.css
@@ -0,0 +1,3 @@
+body {
+    background: green;
+}
diff --git a/test/html/animation/test.html b/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>