Как анимировать только что созданный элемент в Angularjs без сторонних библиотек?

Question

[freydev]

.directive('editable', function ($compile, $animate) {
                return function (scope, element, attr) {
                    element.on('click', function (event) {
                        var popup = $compile('<div></div>')(scope)
                                .css({
                                    position: 'absolute',
                                    left: '50%', top: '50%',
                                    width: '600px', height: '400px',
                                    'margin-left': '-300px', 'margin-top': '-200px',
                                    background: 'black'
                                });
                        element.append(popup);
                    })
                }
            })

Как заставить angular навесить класс с анимацией на только что созданный элемент popup

Answer 1

[Тимофей]

Во-первых, нужно подключить в зависимости модуля приложения ngAnimate (не забыв сам скрипт подключить, само собой).
Во-вторых, задать в css transition'ы для элементов, которые нужно анимировать.
Дальше ангуляр сам поймет, что с этим делать, и если все правильно прописано в стилях, то, как говорится, все заработает само. Только нужно разобраться с классами, которые ангуляр подставляет для анимации (или настроить свои в config через $animateProvider).
Подробнее тут и в гугле.

Comments

[Тимофей]

А, извиняюсь, не обратил внимание на динамическое создание элемента. В таком случае лучше его создавать, а в scope директивы загнать булевую переменную типа show и сделать шаблон для твоего попапа с ng-show="show". Ну и дальше все, что я писал выше.

[Тимофей]

*Лучше его создавать сразу, а по событию делать scope.show = !scope.show (ну или какая тебе там логика нужна)

[freydev]

Это я понимаю, все эти директивы справедливы для уже созданных элементов. Можно добавить любой класс анимации через popup.addClass(), но мне кажется это не angular way, я ищу более нативный путь

[freydev]

Тимофей: а если например я хочу создать произвольное событие svg фигур, и анимировать каждую последовательно, хочу разобраться именно с анимацией динамически созданных элементов

[freydev]

*количество

[Тимофей]

Angular way - это ничего не делать в коде для того, чтобы анимация работала. В том и суть, что единственным куском кода, который включает анимации на сайте является angular.module('myApp', [..., 'ngAnimate', ...]). Ну, не считая css, разумеется. Ты четко разделяешь логику и внешний вид данных (хотя для ангуляра это немного размыто, потому что много логики в представлениях, но это не касается стилей).
Да и создание элементов через $compile - это далеко не angular way, нужно всю разметку выносить в шаблоны или хотя бы в строку template, если там ее почти нет.
С svg точно не знаю, но он же все равно остается подмножеством xml, доступным в дереве документа, то есть все директивы и стили можно применять к элементам svg так же, как и к обычным html элементам, а значит поведение будет ровно таким же. Но это я предполагаю, сам непосредственно с этим дела не имел. Ну и такое справедливо только для inline svg, по-другому включить svg в dom вряд ли получится, а, следовательно, не получится и взаимодействовать с ним.

[freydev]

Тимофей: спасибо за развернутый ответ