In this lesson John looks at how to integrate the popular TweenMax library with
ngAnimate to get animation effects in an AngularJS application.
TweenMax is a popular library for doing animations. It's super fast, very robust, tons of features. Definitely check it out, and I'll probably even do more videos on it because I like it so much.
Add the animation of ".toggle" because it's still a style name, you'll see here,. The class is "toggle" so because it's a class, add the dot.
Let's return an object, since it's ng-if animation that we're doing, the object has a leave. The leave will take a parameter of element. With that element you can do an animation when it triggers the leave.
I'll say TweenMax from-to, we'll say take the element for one second. Take it from an opacity of one to an opacity of zero. Then once we refresh over here, you can see I hit this and it will go away.
One thing I have to point out though, is if you inspect this element here, you can see that it's still there. That means that the ng-if hasn't applied and removed the element. That's because the second parameter here is a callback to "Done", so that once our animation is complete we'll assign that to "Done".
Once our animation is complete, it needs to call "Done". Now you can see if we try and inspect this, it's no longer there. If you can see the "DOM" on this tiny thing, it wouldn't be there either.
Basically it means that it has called "Done", it's removed the element, completely gone. If you forget to call "Done" on some of these animations, you'll just have things lying around, so never forget to call "Done".
Then the second part of this is just doing a very, very similar thing with "Enter". I will just copy this line, so we'll say TweenMax from-to. We'll start with an opacity of zero, because it's going to come in and be added, and then animate up to an opacity of one. We'll need the element and "Done" in here as well.
Once that's complete, we'll hit "Refresh", click "Toggle". It'll fade out. Click "Toggle" again. It'll fade back in.
If you actually watch, let me drag and make this a bit bigger, and will show you this element leaving and coming back in just so it makes a bit more sense.
Select it, and you can see once I click "Toggle"...I can make this a bit bigger too...once I click "Toggle", you saw the value going down and now the element has disappeared. Hit "Toggle" again, and you can see the value is going up. You can see what's going on there if you watch carefully. Leaving...coming back in.