Use CSS3 to implement animation in Angular, css3angular

Use CSS3 to implement animation in Angular, css3angular

If you don't talk much about it, paste the instance Code directly.

Let's look at the example:

<! Doctype html> 
Introduce the angular-animate plug-in. We have bound the ng-if command. When deleting and adding DOM nodes, angular will add the specified class to facilitate animation.

. Ng-enter
. Ng-enter-active
. Ng-leave
. Ng-leave-active

Now let's look at display and hide.

<! Doctype html> 
. Ng-hide-remove
. Ng-hide-remove-active
. Ng-hide-add
. Ng-hide-add-active

In this example, ng-show is used, which belongs to display and hide. In the previous example, ng-if is added or deleted.
Review the routes we mentioned in the previous section. We can combine them to perform operations.

<! Doctype html> 
In this way, the page will fade in and out.

Review Baidu search in the previous chapters:
<! Doctype html> 
Through cross-origin, we can obtain the data returned by Baidu and display it on the page in turn.



The following is an example of JS Animation:

<! Doctype html> 
JS animation is completed using the JQ animation library. Note that ng-if is used in the view to add and delete DOM nodes, so we can return leave & enter in the controller.

With ng-if, JS animation is ng-show.
<! Doctype html> 
In the Controller return addClass & removeClass, it indicates hiding and displaying.

Articles you may be interested in:

      

 
       
Code that implements some animation effects in AngularJS applications
 
       
How to Use ngView with AngularJS applications to achieve animation Effects
 
       
Summary of how AngularJS displays or hides animation Effects