Обратный вызов анимации углового ng-view

Question

Я учусь угловато, и у меня есть вопрос об анимации между шаблонами ng-view.

Когда я щелкаю по ссылке шаблон, текущий шаблон и новый (щелкнул один) сохраняет анимацию одновременно, что делает содержание после ng-view прыжка вниз для старых и новых шаблонов высоты.

Это мой index.html:

<ul> 
    <li><a href="#/">View 1</a></li> 
    <li><a href="#/view2">View 2</a></li> 
</ul> 

<div> 
    <div ng-view></div> 
</div> 

page.html (шаблон)

<div class="page"> 
    <div class="center"><!-- this div centers the content horizontally, 
          it has a fixed value (with margin:0 auto) which 
          will change with media querys --> 

     <h1>view</h1> 

    </div> 
</div> 

И CSS:

.ng-enter, .ng-leave { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.ng-enter { 
    opacity: 0; 
} 

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

.ng-leave { 
    opacity: 1; 
} 

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

.page>div.center{ 
    width: 500px; /* fixed width, this value will change in media queryes*/ 
    margin: 0 auto; 
} 

New plunker

На старте Вид 1. Как это сделать, когда я нажимаю на Просмотреть 2, чтобы сначала исчезнуть Просмотреть 1, а затем затухать в Просмотреть 2?

Теперь, когда я нажимаю View 2 это начать FadeIn одновременно с View 1 гаснуть, что делает содержание после ng-view скачка для обоих шаблонов высоты, которые я не хочу.

Как предложил @Dabbiemiller, используя display:inline-block костюмы, но тогда это разбивает мое горизонтальное центрирование - plunker

Answer 1

заменить

.ng-enter, .ng-leave { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.ng-enter { 
    opacity: 0; 
} 

со следующим кодом

.ng-enter { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
    opacity: 0; 
} 

вам не нужно, чтобы сделать анимацию на оба события (вход/выход), вы можете сделать только на въезд и он не будет делать одновременная анимация сразу скроет первый вид, а затем оживит второй.

http://plnkr.co/edit/iVSRrg9nBaDTtHUZcDDu

, если вам нужна одна за другой анимации вам нужен обратный вызов.Для того, чтобы избежать повторения вы можете найти ответ здесь:

AngularJS css animation + done callback

Answer 2

Отнесите: http://plnkr.co/edit/EcI5kBxo4pXCsh3th8Jh?p=preview

<div ng-view style="display:inline-block;"></div> 

и, как сказал в комментариях, добавить задержку ваших переходов:

.ng-enter{ 
    -webkit-transition: all 2s ease 1s; 
    -moz-transition: all 2s ease 1s; 
    -o-transition: all 2s ease 1s; 
    transition: all 2s ease 1s; 
} 

.ng-leave { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

Edit: После комментария от Vucko, говоря, что мое решение не работает им, из-за внутреннего div, который имеет фиксированную ширину, я предложил новое решение here, с position:absolute;.