Я пытаюсь сделать анимацию перехода между двумя страницами.
На контроллерах 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 -->
ng-show
вместоng-if
? - person ryanyuyu   schedule 30.04.2015ng-if
наng-show
? Если да, то не сработал даже первый переход. - person Ricardo Binns   schedule 30.04.2015$scope.foobar
с одинаковыми именами. вам понадобится внешний контроллер с переменнойfoobar
, которая не зависит от ваших контроллеров представления, и используйте$broadcast
, чтобы уведомить этот контроллер о том, что его значение необходимо изменить. - person Claies   schedule 30.04.2015ng-app
, любые другие спискиng-controller
и гдеng-view
относительноng-if
? - person Claies   schedule 30.04.2015ng-app
на моем<html ng-app='appname' />
. На представлении нетng-controller
, аng-view
есть на<body><div ng-view></div></body>
. - person Ricardo Binns   schedule 01.05.2015$scope.foobar
. Я уверен, что есть какой-то способ дождаться завершения анимации перед привязкой нового экземпляра, но я не уверен на 100% в синтаксисе. это займет немного экспериментов. - person Claies   schedule 01.05.2015