AngularJS 动画用法

it2026-06-16  6

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>

最新回复(0)