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

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.

    

        {{entry.title}}
        more?
        
{{entry.description}}
    

See JSFiddle

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