0

so I have a jade snippet like this

.statusbox 
    h5 {{status}}

which is equivalent to

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

two questions:

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

Thanks so much!

Leon

1 Answer 1

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.

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

5 Comments

This actually solved my another problem :D: What if I want to catch the event whenever {{status}} changes?
@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.
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?
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).
It should be noted that this would work in Angular 1.0.X as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.