Ng-animate, когда ng-view обновляется по маршруту

Я пытаюсь анимировать изменение div в ng-view в AngularJS.

Итак, мой div внутри моего файла index.html выглядит так:

<div ng-view></div>

У меня есть еще один html файл (view1.html), содержащий только div внутри.

My app.js с маршрутизацией выглядит так:

app.config(function($routeProvider) {
$routeProvider
    .when('/sites/:templateID',
    {
        controller: 'simpleController',
        templateUrl:'templates/question.html'
    })
});

Я меняю путь одним нажатием кнопки и вызываю это:

$location.path("/sites/" + nextID);

Изменения URL-адреса сайта, и обновляется только ng-view-div. Но когда я применяю к нему ng-анимацию:

<div class="content" data-ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"></div>

Это не работает. Я включил AngularJS 1.2.5, файл animate-js внутри моего index.html, а также мой CSS:

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

.animate-enter {
    left: -100%;
}

.animate-enter.animate-enter-active {
    left: 0;
}

.animate-leave {
    left: 0;
}

.animate-leave.animate-leave-active {
    left: 100%;
}

Есть ли способ анимировать изменение ng-view через route- (URL) -изменение?

Ответ 1

Есть несколько изменений в правилах CSS с помощью Angular Animation 1.2+. Директива ng-animate больше не используется, поэтому теперь функция AngularJS изменяет класс элемента на основе событий, таких как hide, show и т.д.

Вы можете определить их так же в своем CSS:

.toggle {
    -webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* easeOutQuad */
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* easeOutQuad */
}

.toggle.ng-enter {
    opacity: 0;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
}

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

.toggle.ng-leave {
    opacity: 1;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
}

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

.toggle.ng-hide-add {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    opacity: 1;
}

.toggle.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}

.toggle.ng-hide-remove {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    display: block !important;
    opacity: 0;
}

.toggle.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

Таким образом, когда у вас есть свой HTML-элемент, вам действительно нужно определить class="toggle", например. Когда ваше приложение запустится Angular, он соответствующим образом добавит классы.

Вот хороший ресурс для различных методов анимации от Augus

И вот отрыв изменений в анимации AngularJS

Ответ 2

ng-view может работать с анимацией. На самом деле есть официальный пример. Проверьте ссылку.

Также помните, что вам также нужно объявить зависимость ngAnimate для работы:

var app = angular.module('App', [
    'ngRoute',
    'ngAnimate'
]);

HTML

<div class="content">
    <div class="question" ng-view></div>
</div>

Класс .question определяет анимацию CSS:

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

Ваше измененное демо Plunker.

Мини-проект

Я также создал небольшой проект, демонстрирующий различные анимации ngView. Проверьте это страница.

Ответ 3

В версии 1.2+ вам больше не нужна директива, также была изменена нотация css.

1.2.5 способ сделать это следующим образом:

Дайте вашему классу вид:

<div data-ng-view class="mainview-animation"></div>

Добавьте следующую зависимость:

/**
 * Main Application & Dependencies
 * @type {*}
 */
var mainApp = angular.module('app', [
    // Angular modules
    'ngRoute',
    'ngAnimate'
]);

Затем добавьте следующий CSS:

/*
 The animate class is apart of the element and the ng-enter class
 is attached to the element once the enter animation event is triggered
*/
.mainview-animation.ng-enter {
  -webkit-transition: .3s linear all; /* Safari/Chrome */
  -moz-transition: .3s linear all; /* Firefox */
  -o-transition: .3s linear all; /* Opera */
  transition: .3s linear all; /* IE10+ and Future Browsers */
}

/**
 * Pre animation -> enter
 */
.mainview-animation.ng-enter{
  /* The animation preparation code */
  opacity: 0;
}

/**
 * Post animation -> enter
 */
.mainview-animation.ng-enter.ng-enter-active { 
  /* The animation code itself */
  opacity: 1;
}

Ответ 4

Чтобы добавить к принятому ответу, необходимо либо определить позицию: абсолютное или отображение: заблокировать .ng-enter и .ng-leave. Некоторое время я боролся с этим, пытаясь исчезнуть в ng-view при изменении маршрута и не хотел использовать абсолютное позиционирование. Пример без префиксов браузера для перехода:

//add animate class to ng-view

//css
.animate.ng-leave, .animate.ng-enter { 
    transition: 1s cubic-bezier(0.5, 0.1, 0.25, 1) all;
}
.animate.ng-enter, .animate.ng-leave.ng-leave-active {
    opacity: 0;
    display: block;
}
.animate.ng-leave, .animate.ng-enter.ng-enter-active {
    opacity: 1;
    display: block;
}

В моей конкретной ситуации я удалил переход из ng-leave, поэтому не было бы перекрытия элементов, из-за чего один из них был бы нажат вниз из-за отображения блока.