Using CSS3 to implement animation in angular _angularjs

No more nonsense to say, directly to everyone to paste the example code.

See examples directly:

<! DOCTYPE html>  

With the introduction of the Angular-animate plug-in, we have bound the ng-if instruction, when the DOM node is deleted and added, angular adds the specified class for us to complete the animation.

. ng-enter
. ng-enter-active
. ng-leave
. ng-leave-active

Now look at the show and hide.

<! DOCTYPE html>  

. ng-hide-remove
. ng-hide-remove-active
. ng-hide-add
. ng-hide-add-active

The example we use is Ng-show, which belongs to display and hide. The previous example is Ng-if, which belongs to add and delete.

Looking back at the route we mentioned in the previous section, we can combine operations.

<! DOCTYPE html>  

This will have the effect of fading out when you switch pages.

Then review the previous chapters of the Baidu search:

<! DOCTYPE html>  

Through the cross-domain we get the data returned by Baidu, in turn, the transition is displayed on the page.

Here's a look at the example JS Animation:

<! DOCTYPE html>  

JS Animation We use JQ Animation library to complete, note that we use in the view of the ng-if, means to add and remove the DOM node, so we return Leave&enter in the controller.

JS Animation has a ng-if, nature is ng-show.

<! DOCTYPE html>  

The

Return Addclass&removeclass on the controller indicates hidden and displayed.