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

这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！

// 包含AngularJS 代码

// b.html 文件的内容

{{ x.name }}

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

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、案例

// 案例一

隐藏 DIV:

// 案例2

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。