AngularJS 动画效果

作者 : 慕源网 本文共927个字,预计阅读时间需要3分钟 发布时间: 2022-05-2 共193人阅读

AngularJS 动画效果,使用NgAnimate模块在Angular.JS中创建动画效果,该模块为基于CSS的动画提供支持。动画是用来提供动态运动效果的东西。在这里,使用NgAnimate模块对HTML进行了转换,以提供一种运动的错觉,该模块为我们提供了JavaScript和CSS的组合效果。使用此示例代码,通过选中复选框来显示隐藏分区/部分的演示。

使用AngularJS将动画带入图片的步骤:

  • 在script 标签中包含 Angular.Js 动画库:
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"
  • 在body标签中引用NgAnimate模块:
    ng-app=”ngAnimate”

NgAnimate模块添加和删除类。AngularJS中使用的添加/删除类的指令是:

ng-show, ng-hide

示例:下面是 Angular.Js 动画的实现。

<html>
<style>
	div {
		transition: 0.6s;
		border-radius: 500%;
		height: 250px;
		width: 250px;
		background-color: red;
		display: inline-block;
	}
	
	.ng-hide {
		background-color: yellow;
		top: 5px;
		left: 100px;
	}
</style>
	
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
	
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
</script>

<body ng-app="ngAnimate">

	<h1>Hide the Circle
	<input type="checkbox"
			ng-model="myCheck">
</h1>

	<div ng-hide="myCheck"></div>

</body>

</html>

输出:

之前:

AngularJS 动画效果

之后:

AngularJS 动画效果

AngularJS 动画效果


慕源网 » AngularJS 动画效果

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录