AngularJS 使用动画需要引入 angular-animate.min.js 库。 ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。 www.djznrobot.com
CSS 过渡 CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个:
实例 在 DIV 元素设置了 .ng-hide 类时,过渡需要花费 0.5 秒,高度从 100px 变为 0:
<style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; } .ng-hide { height: 0; } </style>
CSS 动画 CSS 动画允许你平滑的修改 CSS 属性值:
实例 在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行,它会平滑的将高度从 100px 变为 0:
<style> @keyframes myChange { from { height: 100px; } to { height: 0; } } div { height: 100px; background-color: lightblue; } div.ng-hide { animation: 0.5s myChange; } </style>
