AngularJS анимация с UI роутером не работает

Question

AngularJS анимация с UI роутером не работает

0

Я пытаюсь изучить свой путь через AngularJS и в настоящее время пытаюсь поиграть с анимацией между переходами состояний с помощью ui.router. независимо от того, что я делаю, нет анимаций, и состояние просто меняется без перехода.

Версии

angularJS v1.3.16
angular-animate 1.4.1
angular-ui-router 0.2.15

Мой JS

angular.module('myApp', [
'ui.router',
'ngAnimate'
]).
config(function($stateProvider,$urlRouterProvider) {
  $stateProvider
      .state(
      "dashboard",{
        url: "/dashboard",
        templateUrl: "dashboard.html",
      }
  )
      .state(
      "terminals",{
        url: "/terminals",
        templateUrl: "terminals.html",
      }
  )
  $urlRouterProvider.otherwise("/dashboard")
});

на моей странице у меня есть

<div ui-view class="slide"></div>

и выдержка из моего css

.slide {
-webkit-transition: -webkit-transform .7s ease-in-out;
-moz-transition: -moz-transform .7s ease-in-out;
-o-transition: -o-transform .7s ease-in-out;
transition: transform .7s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0);
}

.slide.ng-enter {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
 }

.slide.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
 transform: translateX(100%);
 }

были бы признательны за любые указатели, в которых я ошибаюсь.

user2168435 06 июль 2015, в 09:00

Источник

Теги:

angularjs

animation

1 ответ

Ещё вопросы

Paweł Smołka · Accepted Answer · 2015-07-06T05-40-00.000Z

У меня такая же битва, когда я использовал DJANGO в качестве бэкэнд. Когда у меня была анимация, сделанная для углового маршрута, это была "срезанная половина" этой анимации.

Поскольку я использую expressjs + nodejs, это больше не происходит.

Я здесь, я вставляю свои части кода, которые я использовал.

ОЧЕНЬ ВАЖНО СДЕЛАТЬ ЭТО ДЛЯ HTML5!

Также было необходимо сделать CSS с шаткой и задержкой, как в конце этого ans.

Это рабочий пример, поэтому, если вы используете угловой маршрут вместо ui.router, он будет работать для вас. Также я рекомендую обновить ваш угловой до 1.4. *

var shop = angular.module('shop', ['ngRoute', 'ngAnimate', 'ngTouch']);

shop.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
        $routeProvider
        .when('/', { 
            templateUrl: '/partials/index',
            controller: 'indexController'
        })
        .when('/cart', { 
            templateUrl: '/partials/cart',
            controller: 'indexController'
        })
        .when('/account',{
            templateUrl: '/account',
            controller: 'profileController'
        })
        .otherwise({
            redirectTo: '/'
        });
    }
]);

Часть Html:

<div class="ng-view zipper ng-animate"></div>

И CSS (конечно, вы можете разместить свои анимации здесь, я просто примерю его на моем, чтобы помочь вам):

.zipper.ng-animate {
  transition:0.5s ease all;
}
.zipper.ng-enter {
  opacity:0;

}

.zipper.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  transition-delay: 0.1s;

  /* in case the stagger doesn't work then the duration value
   must be set to 0 to avoid an accidental CSS inheritance */
  transition-duration: 0s;
}

.zipper.ng-enter.ng-enter-active {
  transition-delay:0.6s;
  opacity:1;
  z-index:10;
}
.zipper.ng-leave {
  opacity:1;

}
.zipper.ng-leave.ng-leave-active {
  opacity:0;
  z-index:9;
}

отлично, после обновления angular все заработало как положено, пометит как ans