fix($animate): insert elements at the start of the parent container instead of at the end

$animate.enter and $animate.move both insert the element at the end of the provided parent
container element. If an after element is provided then they will place the inserted element
after that one. This works fine, but there is no way to place an item at the top of the provided
parent container using both these functions. This commit fixes this issue.

BREAKING CHANGE: $animate will no longer place elements at the end of the parent container
when enter or move is used with a parent container element. Any former directives that rely
on this feature must be slightly modified to work around this fix. The same effect can be achieved
by finding the final element in the parent container list and using that as the after element
(which is the 3rd argument in the enter and move $animate operations).

Closes angular#4934
Closes angular#6275

Author: matsko

src/ng/animate.js

@@ -111,8 +111,9 @@ var $AnimateProvider = ['$provide', function($provide) {
        * @ngdoc method
        * @name $animate#enter
        * @function
-       * @description Inserts the element into the DOM either after the `after` element or within
-       *   the `parent` element. Once complete, the done() callback will be fired (if provided).
+       * @description Inserts the element into the DOM either after the `after` element or
+       * as the first child within the `parent` element. Once complete, the done() callback
+       * will be fired (if provided).
        * @param {DOMElement} element the element which will be inserted into the DOM
        * @param {DOMElement} parent the parent element which will append the element as
        *   a child (if the after element is not present)
@@ -122,14 +123,9 @@ var $AnimateProvider = ['$provide', function($provide) {
        *   inserted into the DOM
        */
       enter : function(element, parent, after, done) {
-        if (after) {
-          after.after(element);
-        } else {
-          if (!parent || !parent[0]) {
-            parent = after.parent();
-          }
-          parent.append(element);
-        }
+        after
+            ? after.after(element)
+            : parent.prepend(element);
         async(done);
       },
 

test/ng/animateSpec.js

@@ -15,6 +15,19 @@ describe("$animate", function() {
       expect(element.contents().length).toBe(1);
     }));
 
+    it("should enter the element to the start of the parent container",
+      inject(function($animate, $compile, $rootScope) {
+
+      for(var i = 0; i < 5; i++) {
+        element.append(jqLite('<div> ' + i + '</div>'));
+      }
+
+      var child = jqLite('<div>first</div>');
+      $animate.enter(child, element);
+
+      expect(element.text()).toEqual('first 0 1 2 3 4');
+    }));
+
     it("should remove the element at the end of leave animation", inject(function($animate, $compile, $rootScope) {
       var child = $compile('<div></div>')($rootScope);
       element.append(child);