Angular ng-view 动画过渡答案

【问题标题】：Angular ng-view animation transitionsAngular ng-view 动画过渡
【发布时间】：2015-06-03 13:17:08
【问题描述】：

使用 angularjs 1.2，我想在进入和离开的视图中应用过渡动画。我正在使用“ngAnimate”来实现这一点，但是过渡动画只发生在我的主页上。我一直使用这个article 作为指南。

HTML (index.html)：

<body ng-controller="mainCtrl" id="outer">
    <div id="page">

    <!-- partial views -->
    <div class="page {{pageClass}}" ng-view></div>      

</body>

我已经为每个页面创建了一个控制器并应用了一个类来尝试使用 CSS3 操作 DOM。请问有没有更好/更清洁的方法来做到这一点？

AngularJS：

var myWebsite = angular.module('myWebsite',['ngRoute', 'duScroll','ngSanitize','ngAnimate'])
.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl:'home.html',
            controller:'mainCtrl'
            })
        .when('/about', {
            templateUrl:'about.html',
            controller:'aboutCtrl'
            })
        .when('/contact',{
            templateUrl:'contact.html',
            controller:'contactCtrl'
            })
        .when('/services', {
            templateUrl:'services.html',
            controller:'servicesCtrl'
            })
        .otherwise({
            templateUrl:'home.html',
            controller:'mainCtrl'
            });
})

.controller('mainCtrl',function($scope){
    $scope.pageClass = 'home';
})

.controller('aboutCtrl',function($scope){
    $scope.pageClass = 'about';
})
.controller('servicesCtrl',function($scope){
    $scope.pageClass = 'services';
})
 .controller('contactCtrl',function($scope){
    $scope.pageClass = 'contact';
})
...

我正在使用 CSS 尝试在 enter'ng-enter' 上创建滑入和离开'ng-leave' 的滑出。我只将这些样式应用于 .about 和 .home，尽管当我在 Google Developer 中查看我的代码时，类“.home”不是通过 angularjs 控制器动态生成的，而是正在生成的 .about。我相信动画正在发生在非动态生成的“.page”类上。

CSS：

/* --- page specific animations --- */

/* home */
.page.ng-enter, .about.ng-enter{
     -webkit-animation:slideInUp 0.5s both ease-in;
    -moz-animation:slideInUp 0.5s both ease-in;
    animation:slideInUp 0.5s both ease-in;
    z-index: 8888; 

}

/* leave */
.page.ng-leave, .about.ng-enter{
     -webkit-animation:slideDownOut 0.5s both ease-in;
    -moz-animation:slideDownOut 0.5s both ease-in;
    animation:slideDownOut 0.5s both ease-in; 
    z-index: 9999;
}


/* --entering animation--*/

/* slide in from the bottom */
@keyframes slideInUp {
    from    { transform:translateY(100%); opacity: 1; }
    to      { transform: translateY(0); opacity: .5; }
}
@-moz-keyframes slideInUp {
    from    { -moz-transform:translateY(100%); opacity: 1;}
    to      { -moz-transform: translateY(0); opacity: .5;}
}
@-webkit-keyframes slideInUp {
    from    { -webkit-transform:translateY(100%); opacity: 1;}
    to      { -webkit-transform: translateY(0); opacity: .5;}
}

/* --leaving animation--*/

/* slide in from the bottom */
@keyframes slideDownOut {
    from    { transform: translateX(0%); opacity: .5; }
    to      { transform: translateY(100%); opacity: 0;}
}
@-moz-keyframes slideDownOut {  
    from    { -moz-transform: translateX(0%); opacity: .5; }
    to      { -moz-transform: translateY(100%); opacity: 0;}
}
@-webkit-keyframes slideDownOut {
    from    { -webkit-transform: translateX(0%); opacity: .5;}
    to      { -webkit-transform: translateY(100%); opacity: 0;}
}

【问题讨论】：

标签： angularjs css transition ng-animate ng-view

【解决方案1】：

我使用 google cdn 将 angularJs 和 angular-Animate 升级到版本 1.3.14，并应用了以下有效的代码。

我删除了每个视图的乘法控制器，因为完成此任务不需要它们。

如果有人对如何优化此代码以提高性能/速度有任何建议，请发表您的建议。谢谢

我使用this video 进行指导，而这个code example

角度：

var myWebsite = angular.module('myWebsite',['ngRoute', 'duScroll','ngAnimate'])
.config(function($routeProvider){
    $routeProvider
        .when('/#', {
            templateUrl:'home.html'
            })
        .when('/about', {
            templateUrl:'about.html'
            })
        .when('/contact',{
            templateUrl:'contact.html'
            })
        .when('/services', {
            templateUrl:'services.html'
            })
        .otherwise({
            templateUrl:'home.html'
            });
})

我在我的 CSS 中应用了 .ng-enter、.ng-leave、.ng-enter-active、.ng-leave-active、.ng-leave-stagger、.ng-enter-stagger。这些类是通过 angular-animate 动态应用的，我只是使用 css 将动画应用于每个类。

CSS：

.slide-container {
  position:relative;
}
.slide.ng-enter, .slide.ng-leave {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition:0.5s linear all;
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:600px;
}

.slide.ng-enter-stagger{
    transition-delay:1s;
    -webkit-transition-delay:1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
}

.slide.ng-enter {
  z-index:100;
  top:600px;
  opacity:0;
}
.slide.ng-enter.ng-enter-active {
  top:0;
  opacity:1;
}

.slide.ng-leave {
  z-index:101;
  top:0;
  opacity:1;
}
.slide.ng-leave.ng-leave-active {
  top:-600px;
  opacity:0;
}

.slide.ng-leave-stagger{
    transition-delay:1s;
    -webkit-transition-delay:1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
}

然后我通过删除我使用 angular 生成的动态类来更改我的 HTML，并将我的动画类应用到 ng-view

<body ng-controller="mainCtrl" id="outer">
    <div id="page">

    <!-- navigation --> 
    <ng-include src="'nav.html'"></ng-include>

    <!-- partial views -->
    <div ng-view class="slide"></div>   

    <!-- footer -->
    <ng-include src="'footer.html'"></ng-include>

</body>

【讨论】：