Angularjs animation-nganimate--quickly get started, use

AngularJS Animation

AngularJS provides an animated effect that can be used with CSS.

AngularJS using animations requires an external introduction to the Angular-animate.js library.

1. Write the nganimate dependency injection to the current MyApp module;

<script>
var app = Angular.module (' myApp ', [' nganimate ']);
</script> the role of the 2.ngAnimate model:

The Nganimate model can add or remove class classes .

The nganimate model does not animate HTML elements, but nganimate monitors events like hiding HTML elements, and if an event occurs nganimate uses the predefined class to set the HTML The animation of the element.

AngularJS Add/Remove class instructions:

• ng-show   移除class类为.ng-hide的值
• ng-hide   添加class类为.ng-hide的值
• ng-class  动态绑定一个或多个 CSS 类
• ng-view　 
• ng-include  包含外部的 HTML 文件
• ng-repeat　循环列表
• ng-if      用于在表达式为 false 时移除 HTML 元素
• ng-switch  根据表达式显示或隐藏对应的部分

In addition to Ng-show and ng-hide, other directives add ng-enter classes as they enter the DOM, and removing the DOM adds ng-leave attributes .

When the location of the HTML element changes, the ng-repeat instruction can also add ng-move classes .

Also, after the animation is complete, the collection of classes for the HTML element is removed.

For example, the ng-hide instruction adds a class:

• ng-animate
• ng-hide-animate
• ng-hide-add(If the element will be hidden)
• ng-hide-add-active(If the element is hidden)
• ng-hide-remove(If the element will be displayed)
• ng-hide-remove-active(If the element is displayed)

3. Often use CSS transition (transitions) or CSS animations to animate HTML elements,

For example, using CSS transitions:

<style>
div {
Transition:all linear 0.5s;

height:100px;
}
. ng-hide {
height:0;
}
</style>

For example, the use of CSS animation, more methods, all have to consider compatibility (IE10 above support)

<style>
@keyframes Mychange {
from {
height:100px;
} to {
height:0;
}
}
div {
height:100px;
}
Div.ng-hide {
Animation:0.5s Mychange;
}
</style>

Summary: Nganimate is controlled by class Ng-hide when the display is hidden, others are n g-enter classes, ng-leave attributes. Now you can Baidu a little more specific use of instructions!

Angularjs animation-nganimate--quickly get started, use