AngularJS 动画效果-慕源网

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 动画效果

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复