How to animate a newly created element in Angularjs without 3rd party libraries?

Question

JavaScript

.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);
                    })
                }
            })

How to force angular to hover class with animation on newly created popup element

Answer 1

First, you need to connect the dependencies of the ngAnimate application module (do not forget to connect the script itself, of course).
Secondly, set transitions in css for elements that need to be animated.
Then the angular itself will understand what to do with it, and if everything is correctly spelled out in the styles, then, as they say, everything will work by itself. You just need to deal with the classes that Angular substitutes for animation (or configure your own in config via $animateProvider).
More here and on google.