AngularJS 学习笔记（五）--- 包含和动画

努力的小朱同学

于 2021-07-23 14:24:23 发布

阅读量227

点赞数 1

分类专栏： angular 文章标签： angularjs

本文链接：https://blog.csdn.net/weixin_45092437/article/details/119033606

版权

angular 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、包含

1、概念

在 AngularJS 中，你可以在一个 HTML 文件中包含另一个 HTML 文件。跟 JavaScript 的 innerHTML 功能类似。除了可以包含 HTML 文件外，还可以包含 AngularJS 代码。默认情况下， ng-include 指令不允许包含其他域名的文件。

2、案例

// 包含html
<body ng-app="">
<div ng-include="'a.html'"></div>
</body>
// a.html文件的代码
<h1>a.html</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>

// 包含AngularJS 代码
<div ng-app="myApp" ng-controller="sitesCtrl"> 
  <div ng-include="'b.html'"></div>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope) {
     $scope.names = [{
         name: 'aaa'
     },
      {
          name: 'bbb'
      }];
});
</script>
// b.html 文件的内容
<table>
<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
</tr>
</table>

二、动画（不太懂没用过）

1、概念

AngularJS 提供了动画效果，可以配合 CSS 使用。但是使用时需要单独引入 angularJS 的动画库：angular-animate.min.js，并且在应用中通过ng-app引用 ngAnimate 。ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS为部分常见的指令提供了动画钩子，比如 ngRepeat, ngSwitch 和 ngView, 而自定义指令则可以通过 $animate 服务来实现。这些动画钩子在各种指令的生命周期内触发，触发时，它会尝试执行 CSS过渡动画（Transition）, CSS关键帧动画（Keyframe Animation）或JavaScript回调动画（callback Animation）（取决于指令中的设定)。动画包括根据AngularJS内置的命名约定定义的CSS原生动画（包括过渡动画和关键帧动画），或者通过工厂(Factory)定义的JavaScript回调动画。

AngularJS也通过设置add和remove钩子来关注类名的变化。这意味着如果从一个元素中增加或者删除一个CSS类，动画会在这个类名被添加或者删除完毕之前就开始执行。(记住：即使元素上使用了表达式或者ng-class指令，AngularJS也只能捕获到类名的变化。

使用CSS Transition时，ng-EVENT（动画开始前的样式）和ng-EVENT-active（动画执行完毕后的样式）这两组样式必须同时出现，且在ng-EVENT中必须包含transition的设置。

另外一种CSS transition的方法是使用CSS的Keyframe关键字，只需要定义开始时的样式，使用keyframes不需要定义结束时的样式。

2、部分动画的类

类	场景
ng-enter	进入DOM时添加的类
ng-leave	移除DOM时添加的类
ng-move	DOM位置发生改变时添加
ng-hide-add	DOM元素将被隐藏时添加
ng-hide-remove	DOM元素将要显示时添加

3、支持动画的指令

指令	支持动画
ng-repeat	enter , leave , move
ng-view	enter , leave
ng-include	enter , leave
ng-switch	enter , leave
ng-if	enter , leave
ng-class	add , remove
ng-show & ng-hide	add and remove (the ng-hide class value)

4、案例

// 案例一
<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 src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

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

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

</body>

// 案例2

  <head>
	<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
	<script src="http://code.angularjs.org/1.2.25/angular-animate.min.js"></script>
    <style>
      .css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
 
.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}
 
.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}
     </style>
  </head>
  <body>
	<p>
	  <input type="button" value="设置" ng-click="myCssVar='css-class'">
	  <input type="button" value="清除" ng-click="myCssVar=''">
	  <br>
	  <span ng-class="myCssVar">CSS-动画文本</span>
	</p>
  </body>

努力的小朱同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
AngularJS 学习笔记（五）--- 包含和动画

一、包含1、概念在 AngularJS 中，你可以在一个 HTML 文件中包含另一个 HTML 文件。跟 JavaScript 的 innerHTML 功能类似。除了可以包含 HTML 文件外，还可以包含 AngularJS 代码。默认情况下， ng-include 指令不允许包含其他域名的文件。2、案例// 包含html<body ng-app=""><div ng-include="'a.html'"></div></body>//
复制链接

扫一扫