在路线过渡anglejs之间滑动

发布时间：2020-12-17 07:42:15 所属栏目：安全来源：网络整理

导读：我只和Angular一起工作了大约一个星期,所以如果我的代码是垃圾,我很抱歉. 我试图在路由转换之间创建一个滑动动作.我可以在幻灯片中创建效果,但不能在路由转换之间创建效果. 反正代码如下：导航 lia ng-click="go('/')" class = "intro currentLink navLinks

我只和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>

视图(S)

<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.940) 2s;
    -o-transition:all cubic-bezier(0.250,0.940) 2s;
    transition:all cubic-bezier(0.250,0.940) 2s;
}
.slide-enter-setup {
    -webkit-transition:all cubic-bezier(0.250,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

谢谢

对于任何googleing这个….

将类别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.940) 2s;
  -moz-transition:all cubic-bezier(0.250,0.940) 2s;
   -o-transition:all cubic-bezier(0.250,0.940) 2s;
      transition:all cubic-bezier(0.250,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也有一些伟大的动画视频

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!