问

在路径转换angularjs之间滑动

yovan 发布于 2023-02-13 23:16

int

我只和Angular一起工作了大约一个星期,所以如果我的代码是垃圾,我会道歉.

我正在尝试在路由转换之间创建滑动操作.我可以在幻灯片中创建效果,但不能在路径转换之间创建效果.

无论如何代码如下:导航

Intro
Why
Res
How
Contact me

视图(S)

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;
}

包括

JavaScript的:

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

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

谢谢

1 个回答

任何人谷歌这....

将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也有一些很棒的动画视频

2023-02-13 23:35 回答

伤心的海2012_626

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签