ng-animate с ng-if и ng-include между двумя разными маршрутами

Я пытаюсь сделать анимацию перехода между двумя страницами.

На контроллерах FirstCtrl и SecondCtrl устанавливается переменная, чтобы сделать управление ng-if.

Проблема в том, что анимация в первый раз работает нормально, а в дальнейшем не работает. Что мне не хватает?

Маршруты:

$routeProvider
    .when('/first', {
        templateUrl: 'views/layout.html',
        controller: 'FirstCtrl'
    })
    .when('/second',{
        templateUrl: 'views/layout.html',
        controller: 'SecondCtrl'
    })

Первый контроллер:

$scope.foobar = true;

Второй контроллер:

$scope.foobar = false;

index.html

<html ng-app='appname'>
   <head> . . . </head>
   <body>
     <div ng-view></div>
   </body>
</html>

layout.html

<div ng-if="foobar" class="effect" ng-include="'views/foobar.html'">
</div>

<a href="/first">fade in</a> <!-- foobar on controller -->
<a href="/second">fade out</a> <!-- foobar on controller -->

CSS (SASS):

.effect {
  -webkit-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;

  &.ng-enter {
    opacity: 0;
  }

  &.ng-enter-active {
    opacity: 1;
  }

  &.ng-leave {
    opacity: 1;
  }

  &.ng-leave-active {
    opacity: 0;
  }

}

.effect.ng-enter, .effect.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;
}

ВАЖНО:

Это некоторая отладка, чтобы доказать, что анимация полностью работает, манипулируя переменной непосредственно из представления:

<div ng-if="foobar" class="effect" ng-include="'views/foobar.html'">
</div>

<button ng-click="foobar=true">fade in</button> <!-- foobar on view -->
<button ng-click="foobar=false">fade out</button> <!-- foobar on view -->

angularjs angular-ng-if ng-animate angularjs-ng-include
person Ricardo Binns    schedule 30.04.2015    source источник
comment
Подходит ли вам использование ng-show вместо ng-if?   -  person ryanyuyu    schedule 30.04.2015
comment
Да, это допустимый вариант, что вы имеете в виду, просто изменить ng-if на ng-show? Если да, то не сработал даже первый переход.   -  person Ricardo Binns    schedule 30.04.2015
comment
Что ж, попробовать в любом случае стоило. Удачи.   -  person ryanyuyu    schedule 30.04.2015
comment
к сожалению, у вас есть две разные переменные $scope.foobar с одинаковыми именами. вам понадобится внешний контроллер с переменной foobar, которая не зависит от ваших контроллеров представления, и используйте $broadcast, чтобы уведомить этот контроллер о том, что его значение необходимо изменить.   -  person Claies    schedule 30.04.2015
comment
Можете ли вы показать немного больше кода, например, где находится ваша директива ng-app, любые другие списки ng-controller и где ng-view относительно ng-if?   -  person Claies    schedule 30.04.2015
comment
@Claies Я новичок в angular, поэтому попробую: ng-app на моем <html ng-app='appname' />. На представлении нет ng-controller, а ng-view есть на <body><div ng-view></div></body>.   -  person Ricardo Binns    schedule 01.05.2015
comment
пожалуйста, отредактируйте вопрос, не добавляйте код в комментарии   -  person Claies    schedule 01.05.2015
comment
@Claies готово, отредактируйте вопрос.   -  person Ricardo Binns    schedule 01.05.2015
comment
хм, я не уверен, что это хороший способ добиться того, чего вы хотите. у вас есть два разных экземпляра одного и того же шаблона, ссылающихся на две разные копии одной и той же переменной $scope.foobar. Я уверен, что есть какой-то способ дождаться завершения анимации перед привязкой нового экземпляра, но я не уверен на 100% в синтаксисе. это займет немного экспериментов.   -  person Claies    schedule 01.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете воспользоваться модулем ngAnimate для отображения анимации при отображении представления.

Вот плункер, показывающий это в действии. Я использую Animate.css и пользуюсь преимуществами класса ng-enter.

div[ng-view].ng-enter {
    -webkit-animation: fadeInRight 1.5s;
    animation: fadeInRight 1.5s;
  }

http://plnkr.co/edit/kUeCBdHLuoSl73rvI9fh?p=preview

person jake    schedule 30.04.2015
comment
ng-view для этого проекта имеет другую цель, в этом случае мне нужно вместо этого работать с ng-include - person Ricardo Binns; 30.04.2015
comment
Вот еще один плункер, который показывает, как можно анимировать ng-show. plnkr.co/edit/uAweJDMoRgLLjliFmasW?p=preview - person jake; 01.05.2015