Переходы анимации с угловым ng-видом

Использование angularjs 1.2, я хотел бы применить переходные анимации к моим представлениям для входа и выхода. Я использую 'ngAnimate', чтобы сделать это возможным, однако анимация перехода происходит только на моей домашней странице. Я использовал этот article в качестве руководства.Переходы анимации с угловым ng-видом

HTML (index.html):

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

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

</body>

Я создать контроллер для каждой страницы и прикладной класс в попытке манипулировать DOM с помощью CSS3. Есть ли лучший/более чистый способ сделать это с угловой, пожалуйста?

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 в попытке создать slidein на enter'ng введите»и slideout отпуска 'нг-отпуск'. Я применил эти стили только к .about и .home, хотя, когда я просматриваю свой код в Google Developer, класс «.home» не динамически генерируется с помощью контроллера angularjs, но он генерируется. Я считаю, что анимация происходит на классе «.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;} 
}

источник

2015-03-30 user3574939

Я модернизировал angularJs и угловую-Animate до версии 1.3.14 с помощью Google CDN, и применяется следующий код, который работает.

Я удалил контроллеры умножения для каждого вида, поскольку они не были необходимы для выполнения этой задачи.

Если у кого есть предложения по оптимизации этого кода для повышения производительности/скорости, пожалуйста, разместите свои предложения. Спасибо

Я использовал 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' 
      }); 
})

я применил .ng войти, .ng-оставить, .ng ввести активные, .ng- leave-active, .ng-leave-stagger, .ng-enter-stagger в моем CSS. Эти классы динамически применяются через 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; 
}

Тогда я изменил свой HTML, удалив динамические классы я генерировал с угловым и применил класс для моей анимации в нг ракурса

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

источник

2015-03-30 22:39:23 user3574939

Переходы анимации с угловым ng-видом

ответ

Смежные вопросы