AngularJSAngularJS学习篇(二十一)

AngularJS 动画

AngularJS 提供了动画效果,能够包容 CSS 使用。

AngularJS 使用动画片须求引入 angular-animate.min.js 库。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <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 type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
  <script type="text/javascript" src="angular-animate.js" charset="utf-8"></script>

</head>
<body ng-app="ngAnimate">

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

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

即使大家运用已经设置了采纳名,能够把 ngAnimate 直接添加在模型中:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <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 type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
  <script type="text/javascript" src="angular-animate.js" charset="utf-8"></script>

</head>
<body ng-app="myApp">

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

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

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>

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 (借使成分将展示)

使用 CSS 动画

我们得以行使 CSS transition(过渡) 或 CSS 动画让 HTML 成分爆发动画效果

CSS 过渡

CSS 过渡能够让我们平滑的将三个 CSS 属性值修改为其余三个:在 DIV
成分设置了 .ng-hide 类时,过渡供给费用 0.5 秒,中度从 100px 变为 0:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}

</style>
  <script type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
  <script type="text/javascript" src="angular-animate.js" charset="utf-8"></script>

</head>
<body ng-app="myApp">

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

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

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>

 在 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>

 

相关文章