Trouble with angularjs animations

Question

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?

Michelle Tilley · Accepted Answer · 2013-04-21 05:37:09Z

1

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)

Working JSFiddle: http://jsfiddle.net/BinaryMuse/CcwKz/
CoffeeScript on CodePen: http://codepen.io/BinaryMuse/pen/nCIfD

edited Apr 21, 2013 at 5:37

answered Apr 21, 2013 at 5:30

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble with angularjs animations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related