css - 如何在使用 AngularJS 加载 HTML 元素后向其添加类？

Question

我正在开发一个单页设计作品集网站，该网站应具有以下页面流程。

注意:所有 div 都应用了 transition: .3s ease;。

1. 访问者单击 nav 链接(这将加载新 View )

2. 新 View 加载到主容器 div 中。

   注意:它将应用 margin-right: -100%; 以便它从页面加载到右侧。

3. 预先存在的 View 得到 margin-left: -100%; 应用到它所以它完全滑出页面 View 。

   同时新 View 得到 margin-right: 0; 这样它从右侧滑入页面 View 。

如何编写上述过程以在 AngularJS 中进行？

Answer 1

您有多种选择。

1. 你可以做一个自定义指令。通常，当您与 DOM 交互时，您是在指令的链接函数中进行的。查看directive guide .
2. 您可以使用像 AngularUI 这样支持一些基本动画的库 (Here is a demo)。
3. 您可以使用 Angular 1.1.x(不稳定)版本，它包括对动画的支持，并且有一些示例可以执行您想要的操作(查看 $animate 服务)。
4. 您可以查看源代码(或直接使用)这个 Angular 模块:https://github.com/ajoslin/angular-mobile-nav它的滑动过渡类似于您想要实现的目标。

我个人认为#1 是最好的，因为它可以帮助您学习指令。如果这是个人站点，那么 #3 可能是最佳选择，因为 $animate 服务正是您想要的，您可以使用不稳定的分支。