A JavaScript work-around for http://stackoverflow.com/questions/24472945/css-transition-stutters-after-being-applied-to-element-with-css-animation/24476506#24476506

appear.js.coffee

app = angular.module 'dashboard'

app.animation '.appear', [->
  addClass: (element, className, done) ->
    $element = jQuery element
    $element.removeClass className
    $element.css 'opacity', 1
    $element.animate {opacity: 0}, 300, 'linear', ->
      $element.addClass className
      done()

    (isCancelled) ->
      $element.stop() if isCancelled

  removeClass: (element, className, done) ->
    $element = jQuery element
    $element.css 'opacity', 0
    $element.animate {opacity: 1}, 200, 'linear', done

    (isCancelled) ->
      $element.stop() if isCancelled
]