本网站只能被运行在支持JavaScript脚本的环境中

第十节 在AngularJS中使用动画

准备

<script src="angular-animate.min.js"></script>
var myApp = angular.module('myApp', ['ngAnimate']);

为了使用动画功能,必须加载ngAnimate模块。

简单示例

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<style>
.ng-hide-add {
    transition: all 1.0s linear;
    display: block!important;
    opacity: 1;
}

.ng-hide-add-active {
    opacity: 0;
}

.ng-hide-remove {
    transition: all 1.0s linear;
    display: block!important;
    opacity: 0;
}

.ng-hide-remove-active {
    opacity: 1;
}
</style>
<script>
var myApp = angular.module('myApp', ['ngAnimate']);
</script>
</head>
<body>
<div ng-app="myApp">
    <label><input type="checkbox" ng-model="visible" /> show-hide</label>
    <h1 ng-show="visible">
        Visible
    </h1>
</div>
</body>
</html>

机制

当内置指令发生特定变化时,AngularJS为该指令定义的class属性值也会产生变化。

根据class属性值的变化而应用不同的CSS代码,从而实现动画。

例如当使用ngShow内部指令时,随着属性值的变化,该指令的class属性产生以下变化:

ng-show属性值变为true时

  1. 追加ng-hide-add。
  2. 待ng-hide-add被移除之后,添加ng-hide-add-active。

ng-show属性值变为false时

  1. 追加ng-hide-remove。
  2. 待ng-hide-remove被移除之后,添加ng-hide-remove-active。

需要注意的是,在定义动画时必须对ng-hide-add及ng-hide-remove样式类添加display: block!important;样式规则。

.ng-hide-add {
    transition: all 1.0s linear;
    display: block!important;   /*当使用ngShow, ngHide内置时为必须*/
}

ngRepeat

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngAnimate']);
myApp.controller('Controller', function($scope) {
    $scope.items = [1, 2, 3, 4];
    
    $scope.add = function() {
        $scope.items.push($scope.items.length + 1);
    };
    
    $scope.remove = function() {
        $scope.items.pop();
    };
});
</script>
<style>
.ng-enter {
    transition: all 0.3s linear;
    font-size: 1.5em;
    opacity: 0;
}

.ng-enter-active {
    font-size: 1em;
    opacity: 1;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="Controller">
    <button ng-click="add()">add</button>
    <button ng-click="remove()">remove</button>
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</div>
</body>
</html>

当在循环数组中增加元素时

  1. 追加ng-enter。
  2. 待ng-enter被移除之后,添加ng-enter-active。

当在循环数组中移除元素时

  1. 追加ng-leave。
  2. 待ng-leave被移除之后,添加ng-leave-active。

ngClass

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngAnimate']);
</script>
<style>
.red {
    color: red;
}
.big {
    font-size: 5em;
}

.red-add {
    transition: all 0.5s linear;
}
</style>
</head>
<body>
<div ng-app="myApp">
    <label><input type="checkbox" ng-model="red" />Red</label>
    <label><input type="checkbox" ng-model="big" />Big</label>
    
    <h1 ng-class="{'red': red, 'big': big}">ngClass</h1>
</div>
</body>
</html>

可以在class属性追加或移除时执行动画。

例如当追加、删除的class为hoge时,根据以下原则变化class。

当hoge被追加时时

  1. 追加hoge-add。
  2. 待hoge-add被移除之后,添加hoge-add-active。

当hoge被移除时

  1. 追加hoge-remove。
  2. 待hoge-remove被移除之后,添加hoge-remove-active。

使用动画时的注意事项

如果只使用ng-hide-add或ng-enter等来设置动画,所有指令都变为需要执行动画的对象。

针对特定元素指定动画时,采用类似于.hoge.ng-hide-add之类的形式添加元素选择器。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngAnimate']);
</script>
<style>
.ng-hide-add {
    transition: all 1.0s linear;
    display: block!important;
}
.ng-hide-remove {
    transition: all 1.0s linear;
    display: block!important;
}

.hoge.ng-hide-add-active {
    opacity: 0;
}
.hoge.ng-hide-remove {
    opacity: 0;
}
.hoge.ng-hide-remove-active {
    opacity: 1;
}

.fuga {
    position: relative;
}
.fuga.ng-hide-add {
    left: 0px;
}
.fuga.ng-hide-add-active {
    left: -100px;
}
.fuga.ng-hide-remove {
    left: -100px;
}
.fuga.ng-hide-remove-active {
    left: 0px;
}

</style>
</head>
<body>
<div ng-app="myApp">
    <label><input type="checkbox" ng-model="visible" /> show-hide</label>
    <h1 ng-show="visible" class="hoge">Hoge</h1>
    <h1 ng-show="visible" class="fuga">Fuga</h1>
</div>
</body>
</html>