AngularJS中实现动画效果的方法

网络编程发布日期：2024/10/3 浏览次数：1

正在浏览：AngularJS中实现动画效果的方法

AngularJS 动画

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

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

还需在应用中使用模型 ngAnimate：

什么是动画？

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

实例

勾选复选框隐藏 DIV:

<!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="/UploadFiles/2021-04-02/angular.min.js">

运行效果：


注意：应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解。


如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：


实例


<!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="/UploadFiles/2021-04-02/angular.min.js">

运行效果：


ngAnimate 做了什么"htmlcode">

<!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="/UploadFiles/2021-04-02/angular.min.js">

CSS 动画


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


实例


在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行，它会平滑的将高度从 100px 变为 0:


<!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="/UploadFiles/2021-04-02/angular.min.js">

以上就是对AngularJS 动画的资料整理，有需要的小伙伴参考下。

        

        
            上一篇：AngularJS 依赖注入详解和简单实例
            下一篇：项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
        
        一句话新闻
高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。