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

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 样式属性。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值