Как использовать ng-анимацию с u-view, а не ng-view?

Я использую angular -ui-router с angularJS v1.2 и хотел бы реализовать пользовательские переходы страниц.
Как я могу использовать ng-animate с ui-view (от angular -ui-router), а не ng-view (что было бы стандартным способом)? См. Remastered Animation в AngularJS 1.2 для справки по ng-view.

EDIT: Я пробовал две разные версии angular: v1.2.0-rc.2 и v1.2.0-rc.3, как это было предложено в комментариях, но, похоже, это не трюк. Думаю, я мог бы что-то сделать неправильно?

Вот HTML:

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

и CSS:

.slide {
    width:1024px;
    height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    border: 1px solid blue;
}

.slide.ng-enter.ng-enter-active {
    border: 1px solid red;
}

Я добавил JSfiddle предыдущего примера. Было бы неплохо расширить этот пример, чтобы охватить ng-view и ui-view, но я не уверен, как получить ng/ui-view и частичные в JSfiddle.

Ответы

Ответ 1

Ошибка теперь закрыта, и они добавили запись на ui-router Wiki. Он также включает демонстрацию Plunkr. Я скопирую пример кода здесь, на всякий случай, если URL-адрес устареет.

HTML:

<div class="row">
   <div class="span12 ui-view-container">
      <div class="well" ui-view></div>        
   </div>
</div>

CSS

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1; 
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

Ответ 2

Похоже, это исправлено с помощью UI Router 0.2.8. Я использую AngularJS v1.2.7.

В качестве примера просто добавьте класс "слайд" в ваш ui-view

<div ui-view class="slide">

И используйте следующую 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%);
}

Кроме того, некоторые анимации, казалось, имели какое-то странное поведение из-за $uiViewScroll. Я работал над этим, добавив autoscroll = "false" в мой элемент ui-view.

Ответ 3

В выходные я создал два плунга, демонстрирующих анимацию вида для ui-view и ng-view

ui-view: http://plnkr.co/edit/jpebBk?p=preview

ng-view: http://plnkr.co/edit/LQhVYU?p=preview

angular -ui-router 0.2.8 пришли исправления к основным ошибкам анимации просмотра

Ответ 4

Я только что разместил учебник с рабочей демонстрацией для использования ngAnimate (1.4.8) с UI-маршрутизатором.

В нем показаны несколько различных анимаций представлений, переход на основной вид и переход в режиме ввода/вывода вложенного представления.

Здесь приведен фрагмент из файла LESS для перехода в режим перехода к основному виду:

main {
    /* start 'enter' transition */
    &.ng-enter {
        /* transition on enter for .5s */
        transition: .5s;

        /* start with opacity 0 (invisible) */
        opacity: 0;
    }

    /* end 'enter' transition */
    &.ng-enter-active {
        /* end with opacity 1 (fade in) */
        opacity: 1;
    }
}

Ответ 5

Избегайте имени view для named-views или id для этого элемента.

Например, если это ваш html

<div id="home-page" ui-view="home">
  <!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>

Вместо:

/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
    /*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

Try:

div[ui-view].ng-enter {
    /*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

Удачи.

Ответ 6

Как кто-то сказал в сообщении. есть ветвь angular 1.2 маршрутизатора, у которой есть исправления, которые заставляют его работать. Я знаю, что использование angular 1.2.6 ng-animate 1.2.6, а моя специальная сборка ui-router из 0.2.0 beta branch 1.2 работает... исчезает ui-views.. в и из.

проблема в том, что вам нужно "построить" бета-ветвь angular router.. вы не можете просто скачать tarball из git, и это сработает.. вам нужно скачать его. затем СОЗДАЙТЕ его. то у вас будет собственный ui-маршрутизатор. посмотрите на свой заголовок ui-router в javascript. мой говорит это..

/**
 * State-based routing for AngularJS
 * @version v0.2.0-dev-2013-10-05
 * @link http://angular-ui.github.com/
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

твоя версия say 0.2.0-dev-2013-10-05? эта дата - это дата, которую я собрал. поэтому ваша дата должна быть релевантна вашей. Если вы не видите, что в своем заголовке вашего javascript вы используете только ту же версию 0.2.0, что и мастер, вы не используете ничего особенного, чтобы сделать 1.2 анимации...

здесь находится pastbin скомпилированного ui-router, который работает с 1.2 попробовать. БУМ!

0.2.0 Angular настраиваемая сборка -ui-router

Ответ 7

В случае, если кто-то захочет использовать animate.css с Angular и UI-Router, можно просто сделать это ниже. Обратите внимание, что это было проверено только с помощью Angular 1.2.21 и UI-Router 0.2.10.

Пример использования FadeInDown для ввода анимации и FadeOutDown в качестве анимации выхода. Просто измените имя анимации для любой анимации из animate.css. Вы также можете поместить это в контейнер div с позицией, установленной в относительную.

HTML:

<div data-ui-view class="fade"></div>

CSS

.fade.ng-enter, .fade.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.fade.ng-enter {
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
}

.fade.ng-leave {
   -webkit-animation-name: fadeOutDown;
   animation-name: fadeOutDown;
}

Другой пример вместо использования bounceInDown и bounceOutDown:

HTML:

<div data-ui-view class="bounce"></div>

CSS

.bounce.ng-enter, .bounce.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.bounce.ng-enter {
   -webkit-animation-name: bounceInDown;
   animation-name: bounceInDown;
}

.bounce.ng-leave {
   -webkit-animation-name: bounceOutDown;
   animation-name: bounceOutDown;
}

EDIT: Создал вилку @kamweti Plunker, чтобы визуализировать пример с помощью animate.css.

Ответ 8

Используя AngularMotion https://github.com/mgcrea/angular-motion, просто добавьте это в свой css...

div[ng-view].ng-leave-active {
    display: none !important;
}

Добавьте анимацию в класс (am-fade в моем случае) вашего ng-view div