How to use ng-class with CSS transitions?

Question

I have an element set to display: none; height: 0px and I want to add classes to it that makes display: block; height: 200px; with a CSS transition on the height. The problem is the transition - for it to work, the element has to be display: block first before changing the height.

So $el.addClass("display-block full-height") doesn't show the transition, as it adds both classes at the same time.

This jQuery does work though:

$el.addClass("display-block");
$el.width(); // <-- Forces a browser redraw of the element before proceeding
$el.addClass("full-height");

What I'd like to know is how I get this working with AngularJS's ng-class ? It seems like the only way is to add both classes at the same time, which doesn't work as above. Is there a good solution, either a way that forces a redraw in the same way or something else?

I could do a custom directive if that's the only answer, but I'd prefer a better way if possible.

what about a delay before adding a class like in this question? — MilkyTech
– MilkyTech, Commented May 16, 2014 at 4:44

cjmling · Accepted Answer · 2014-05-16 04:55:12Z

1

What you need is "Class and ngClass animation hooks" from https://docs.angularjs.org/guide/animations

I edited the given plunker to meet your need (you still need to implement the height though)

BUT animation with display:none and display:block is working here

http://plnkr.co/edit/oH0hh8I1BAPuPz81AqHZ?p=preview

answered May 16, 2014 at 4:55

cjmling

7,29911 gold badges50 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

How to use ng-class with CSS transitions?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related