Modifying DOM (slideDown/slideUp) with AngularJS and jQuery

Question

I\'m trying to implement a slideDown/slideUp animation with AngularJS. I can\'t use CSS3\'s transition (unfortunately) since the height is set to auto

Answer 1

I want to show an example of how this is done with ng-if, since I was looking for a solution for hours running into multiple completely different approaches that work with ng-show only. You may use ng-if vs ng-show if say you need directives initialized only upon becoming visible.

To use jQuery slideDown / slideUp with ng-if, you can also use ngAnimate but using different hooks: enter and leave.

app.animation('.ng-slide-down', function() {
  return {
    enter: function(element, done) {
      element.hide().slideDown()
      return function(cancelled) {};
    },
    leave: function(element, done) { 
      element.slideUp();
    },
  };
});

<div class="ng-slide-down" ng-if="isVisible">
     I will slide down upon entering the DOM.
</div>

This was surprisingly difficult to accomplish, even trying various JS based approaches and CSS only approaches. Ultimately there is a time and place for jQuery's animations.

Answer 2

Alternatively, you can use AngularJS's $animate:

.animation('.slide', function() {
    var NG_HIDE_CLASS = 'ng-hide';
    return {
        beforeAddClass: function(element, className, done) {
            if(className === NG_HIDE_CLASS) {
                element.slideUp(done); 
            }
        },
        removeClass: function(element, className, done) {
            if(className === NG_HIDE_CLASS) {
                element.hide().slideDown(done);
            }
        }
    }
});

Use ng-hide or ng-show to show or hide the description.

    <li ng-repeat="entry in data">
        <span>{{entry.title}}</span>
        <a ng-click="expand = !expand" href="#">more?</a>
        <p class="slide" ng-show="expand">{{entry.description}}</p>
    </li>

See JSFiddle

P.S. you must include jquery and angular-animate.js