13

我只使用 Angular 大约一个星期，所以如果我的代码很垃圾，我深表歉意。

我正在尝试在路线转换之间创建滑动动作。我可以在幻灯片中创建效果，但不能在路线转换之间创建。

无论如何代码如下：导航

<li><a ng-click="go('/')"  class = "intro currentLink navLinks">Intro</a></li>
<li><a ng-click="go('/why')"  class = "why navLinks">Why</a></li>
<li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li>
<li><a ng-click="go('/qualified')" class = "qualified navLinks">How</a></li>
<li><a ng-click="go('/contact')" class = "contact navLinks">Contact me</a></li>

视图

<div class = "pages">
    <div ng-view id="slides" ng-animate="'slide'">
        <!--inside main view-->
    </div><!--end main view-->
</div><!--end pages-->

css

.slide-leave-setup {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.slide-enter-setup {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.slide-enter-setup {
    position: absolute;
    left: 1300px;
}
.slide-enter-start {
    left: 0;
}
.slide-leave-setup {
    position: absolute;
    left: -1700px;
}
.slide-leave-start {
    right: 0;
}

包括

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script src="js/vendor/ui-bootstrap-custom-tpls-0.6.0.js"></script>

javascript:

var app = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'ngAnimate']);

完整项目在https://github.com/arttay/blizz

谢谢

4

3 回答 3

19

对于任何在谷歌上搜索的人......

将类 ng-enter/ng-leave/.ng-enter-active/.ng-leave-active 添加到您的 css 类中。例子

.slide-animate.ng-enter, .slide-animate.ng-leave{
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
   -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
 }


.slide-animate.ng-enter.ng-enter-active {
 position: absolute;
 left: 1300px;
}

.slide-animate.ng-enter {
 left: 0;
}

.slide-animate.ng-leave.ng-leave-active {
 position: absolute;
 left: -1700px;
 }

.slide-animate.ng-leave {
 right: 0;
 }

Egghead.io也有一些很棒的动画视频，如果你想要一个深入的教程

于 2013-11-29T23:20:22.100 回答
2

上面的答案是正确的......但我要补充一点，路线带有斜杠：

.when('/introduction/', ...)

会破坏你的转换...... Angular 会立即重定向到“/introduction”，这会破坏转换。所以一定要使用：

.when('/introduction', ...)

我花了大约 5 个小时才最终确定为什么我的转换不起作用.. 当我的测试项目和所有示例都运行良好时。

于 2014-07-02T15:57:20.693 回答
1

如果您使用的是 Angular 1.2.x，则不再需要 ngAnimate 指令。Angular animate 当前使用 .ng-enter 和 .ng-leave 作为挂钩来添加您的转换。我发现下面的文章非常有助于了解以您尝试完成的方式制作动画的新方法（通过为插入到 ngview 指令中的每个部分设置动画路线）。

动画 AngularJS 应用程序：ngView

于 2014-09-04T17:20:24.427 回答