AngularJS animation


AngularJS provides animation effects that can be used with CSS.

Using animation in AngularJS requires the introduction of the angular-animate.min.js library. 

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

You also need to use the model ngAnimate in the application: 

<body ng-app="ngAnimate">

What is animation?

Animation is a dynamic change effect produced by changing HTML elements.

Example

Check the checkbox to hide the DIV:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

NoteIn the application There should not be too many animations, but appropriate use of animations can increase the richness of the page and make it easier for users to understand.

If our application has set the application name, we can add ngAnimate directly to the model:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Run instance»

Click the "Run Instance" button to view the online instance

What does ngAnimate do?

ngAnimate model can add or remove classes.

The ngAnimate model cannot animate HTML elements, but ngAnimate will monitor events, such as hiding and displaying HTML elements. If an event occurs, ngAnimate will use a predefined class to animate HTML elements.

AngularJS instructions to add/remove class:

  • ng-show

  • ng-hide

  • ##ng-class

  • ##ng-view

  • ng-include

    • ##ng-repeat

    • ng-if

  • ##ng-switch

  • ng- The show
    • and
ng-hide

directives are used to add or remove the value of the ng-hide class. Other instructions will add the ng-enter class when entering the DOM, and the

ng-leave

attribute will be added when removing the DOM. When the position of the HTML element changes, the ng-repeat directive can also add the

ng-move

class. In addition, after the animation is completed, the HTML element's class collection will be removed. For example: ng-hide The command will add the following class:

ng-animate

  • ng-hide-animate

  • ##ng-hide-add

    (if the element will be hidden)

  • ng-hide-remove

    (if the element will be shown)

  • ng-hide-add-active

    (if the element will be hidden )

  • ng-hide-remove-active

    (If the element will be displayed)

  • Use CSS animation

    • We can use CSS transition or CSS animation to animate HTML elements. For this part, you can refer to our CSS transition tutorial and CSS animation tutorial.

CSS Transition

CSS transition allows us to smoothly change the value of one CSS property to another:

Example

When the

.ng-hide
class is set on the DIV element, the transition takes 0.5 seconds and the height changes from 100px to 0:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

CSS animation

CSS animation Allows you to smoothly modify CSS property values:

Example

When the DIV element is set to the

.ng-hide
class,

myChange

The animation will be executed and it will smoothly change the height from 100px to 0:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes myChange {
  from {
      height: 100px;
  } to {
      height: 0;
  }
}

div {
  height: 100px;
  background-color: lightblue;
}

div.ng-hide {
  animation: 0.5s myChange;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

隐藏 DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck">
</div>


</body>
</html>


Run instance »

Click the "Run instance" button to view the online instance