菜鸟笔记-AngularJS 6月5日学习(动画)

最新推荐文章于 2024-06-14 14:36:26 发布

小小菜鸟cs

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量122

点赞数

文章标签： js web angularJs css

AngularJS 动画
AngularJS 提供了动画效果，可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
什么是动画？
动画是通过改变 HTML 元素产生的动态变化效果。
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;
}
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

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

</body>
个人理解：
主要改变了长宽和颜色利用transition设置过度属性
transition: all linear 0.5s;
transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。
1. transition过渡属性
transition 属性是一个简写属性，用于设置四个过渡属性：
语法
transition: property duration timing-function delay;
值描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
all：表示针对所有元素。
none：表示没有元素。
ident：指定CSS属性列表
注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。transition可以和Transform同时使用。
transition:<过渡属性名称> <过渡时间> <过渡模式>
transition-timing-function 的五种取值：
1.ease 逐渐变慢
2.linear 匀速
3.ease-in 缓慢开始（加速）
4.ease-out 缓慢结束（减速）
5.ease-in-out 缓慢开始，缓慢结束（先加速后减速）
6.cubic-bezier 贝塞尔曲线（matthewlein.com/ceaser）
过渡模式比如宽过渡，高过渡和all过渡
ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。
此外，在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加以下类：
ng-animate
ng-hide-animate
ng-hide-add (如果元素将被隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>思涂客 Stooges</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-animate.js"></script>
<script>
angular.module('app',['ngAnimate']).
controller('ctrl', ['$scope', function ($scope) {
$scope.showButton = function () {
$scope.expression = true;
}
$scope.hideButton = function () {
$scope.expression = false;
}
}])
</script>
<style>
#animate{ background-color:red;-webkit-transition:all linear 2s; transition:all linear 2s; opacity:1;}
#animate.ng-hide{ opacity:0;}
/*一下会慢慢解释*/
#animate.ng-hide { }
#animate.ng-hide-add { }
#animate.ng-hide-add.ng-hide-add-active { }
#animate.ng-hide-remove { }
#animate.ng-hide-remove.ng-hide-remove-active { }
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<button ng-click="showButton()">show</button>
<button ng-click="hideButton()">hide</button>
<div id="animate" ng-show="expression">"思涂客"</div>
</body>
</html>
复制代码

简单介绍ng-show：通常使用在需要show/hide的elem，通过一个表达式完成动作。
当angular开始compile时，会发现ng-show里的表达式是undefind，相等于false，这回angular会自动给一个class叫ng-hide。这ng-hide会给elem display：none。点击按钮show，会给expression换成true，这回把ng-hide给拿掉，elem就会看见了。以此类推～
#animate.ng-hide { } //当ng-show=“false”时，自动添加
#animate.ng-hide-add { } //当点击hide时，自动添加
#animate.ng-hide-add.ng-hide-add-active { } //当点击hide时，自动添加
#animate.ng-hide-remove { } //当点击show时，自动添加
#animate.ng-hide-remove.ng-hide-remove-active { } //当点击show时，自动添加
过程：当点击按钮show，当下给关注的elem会去除ng-hide，同时补上3个class “ng-animate”，“ng-hide-remove”，“ng-hide-remove-active”。
animate需要2秒完成，2秒后elem会去除之前所给的class。如果现在点击hide，angular会自动加ng-animate，ng-hide-add，ng-hide-add-active。

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 属性值:
实例
在 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>
通过 @keyframes 规则，您能够创建动画。
@keyframes animationname {keyframes-selector {css-styles;}}
值描述
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

小小菜鸟cs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜鸟笔记-AngularJS 6月5日学习(动画)

AngularJS 动画AngularJS 提供了动画效果，可以配合 CSS 使用。AngularJS 使用动画需要引入 angular-animate.min.js 库。&lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"&gt;&lt;/script&gt;还需在应用...
复制链接

扫一扫