How to trigger the animation on model change in Angular.js

Question

so I have a jade snippet like this

.statusbox 
    h5 {{status}}

which is equivalent to

<h5 class = "statusbox"> {{status}} </h5>

two questions:

one: Which ng directive we can use to trigger animation occur we defined in css file
What naming convention should b used for css class.

Thanks so much!

Leon

Ben Lesh · Accepted Answer · 2013-10-21 16:46:35Z

1

ng-class will work just fine, assuming you're using CSS3 animations.

<h5 class="statusbox"  ng-class="{ 'animate-class' : foo }">{{status}}</h5>

Then whenever you set $scope.foo = true it will add the class animate-class to your h5. If your CSS3 animations are setup properly, it should animate.

answered Oct 21, 2013 at 16:46

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

5 Comments

LeonJustCurious Over a year ago

This actually solved my another problem :D: What if I want to catch the event whenever {{status}} changes?

Ben Lesh Over a year ago

@LeonJustCurious, best practice would be to check status whenever it might change, so that depends on how status is changing. If it's changing via user input, then ngChange would be apropos. If it's changing due to an AJAX call, you'd want to check it in your success callback. Some people would tell you to use $watch, but that's not really what $watch should be used for. You can, but it's sort of a lazy and inefficient hack.

LeonJustCurious Over a year ago

it is change based on socket.io event....by checking ( without using $watch ) how am I suppose to trigger the animation event? also, what will be the naming convention for the animation class? animation-enter/leave?

Ben Lesh Over a year ago

well to trigger the animation event, you'd simply update $scope.foo to something "truthy", which will add animate-class to your <h5>. Adding animate-class should trigger the animation, assuming you've set up a CSS transition or keyframe animation on the h5 to begin with, and animate-class alters the property you're transitioning (or keyframing).

Ben Lesh Over a year ago

It should be noted that this would work in Angular 1.0.X as well.

Collectives™ on Stack Overflow

How to trigger the animation on model change in Angular.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related