Search code examples
javascriptangularjsangularjs-directiveangularjs-service

Trouble with angularjs animations

Module.animation 'slide-down', ($rootScope) ->
      console.log 'animationInit'
      animation =
        setup: () ->
        start: (element, done, memo) ->
          $(element).slideDown()
          console.log 'animationrun'

<div style="margin-top:10px; margin-bottom:0;" class="alert alert-error" data-ng-show="errorMessage" data-ng-animate="{enter: 'slide-down'}">
    <strong>Error!</strong><br/><span>{{errorMessage}}</span>
</div>

I'm trying to get the above div to slide-down when shown in angularjs, however it's not working for some reason.

In my console I see 'animationInit' when my page loads.

Any idea what I'm doing incorrectly?

Solution

  • ngShow and ngHide support the show and hide keys of ngAnimate, not enter; also, don't forget to call done in the start function so Angular knows when the animation is done.

    Module.animation "slide-down", ->
  setup: (element) ->
    element.css(display: "none")

  start: (element, done, memo) ->
    element.slideDown(done)