Question

使用angularjs 1.2，我想将过渡动画应用于我的进入和离开视图。我正在使用＆＃39; ngAnimate＆＃39;为了实现这一点，过渡动画仅在我的主页上进行。我一直在使用此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创建幻灯片，然后输入＆＃39; ng-enter＆＃39;并且离开休假＆＃39; ng-leave＆＃39;。我只将这些样式应用于.about和.home，但是当我在Google Developer中查看我的代码时，该类＆＃39; .home＆＃39;不是通过angularjs控制器动态生成，而是生成.about。我相信动画正在课堂上发生。＆＃39; .page＆＃39;这不是动态生成的。

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

Answer 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。这些类是通过角度动画动态应用的，我只是使用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>

角度ng视图动画过渡

1 个答案: