AngularJS 动画

AngularJS提供了动画效果,可以配合CSS使用。

AngularJS使用动画需要引入angular-animate.min.js库。

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

还要使用ngAnimate模型:

<body ng-app="ngAnimate">

动画是什么?

动画是通过改变HTML元素产生的动态变化效果。

实例:

<body ng-app="ngAnimate">
隐藏DIV<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

运行案例

ngAnimate作用

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS添加、移除class命令有如下几种:ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch。

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。 

此外, 在动画完成后,HTML 元素的类集合将被移除。

例如:ng-hide 指令会添加以下类:ng-animate、ng-hide-animate、ng-hide-add (如果元素将被隐藏)、ng-hide-remove (如果元素将显示)、ng-hide-add-active (如果元素将隐藏)、ng-hide-remove-active (如果元素将显示)。

使用CSS动画

可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果。

CSS过渡

CSS过渡可以平滑的将一个CSS属性值修改为另一个。

实例:

<style>
div {
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
}
.ng-hide {
    height: 0;
}
</style>

运行案例

说明:在div元素设置了.ng-hide类,过渡需要花费0.5秒,高度从100px变为0。

CSS动画

CSS动画允许平滑的修改CSS属性值。

实例:

<style>
@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
    }
}
div {
    height: 100px;
    background-color: lightblue;
}
div.ng-hide {
    animation: 0.5s myChange;
}
</style>

运行案例

说明:在div元素设置了.ng-hide类时,myChange动画将执行,会平滑的将高度充100px变为0。

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信