Parent > Child animation unexpected - different Angular 1.3 to 1.4 - angularjs

Question

I'm not sure if this is a bug, or I have a lack of understanding of the expected behaviour.
On the following codepen (With Angular 1.4) I expect the parent to animate followed by the child items to animate. However, the parent does not animate and the child items still wait for the transition period.
In this codepen (With Angular 1.3) the animations work as expected.
Is this a bug, am I missing something, or has something changed in 1.3 to 1.4 that I have not followed?
Code for completion
HTML
<div ng-app="app" ng-controller="TestCtrl as test">
<button ng-click="toggleItems()">Toggle Items</button>
<div class="parent" ng-show="items">
<p class="child" ng-repeat="item in items">{{item.name}}</p>
</div>
</div>
CSS
.parent {
background:#f00;
transition:all linear 0.5s;
}
.parent.ng-hide {
opacity:0;
}
.child {
background:#0f0;
transition:all linear 0.5s;
}
.child.ng-enter {
opacity:0;
}
JS
var app = angular.module('app', ['ngAnimate'])
app.controller('TestCtrl', function($scope){
$scope.items = null;
$scope.toggleItems = function(){
if( $scope.items ){
$scope.items = null;
} else {
$scope.items = [
{name: 'item 1'},
{name: 'item 2'},
{name: 'item 3'},
];
}
};
});

Answer 1

I found out what was the issue. But it finally seems like an Angular bug or just an outdated angular css:
1.3.5
Using ng-hide with ng-animate will apply :
ng-hide-animate ng-hide-add ng-hide-add-active when added.
ng-hide-animate ng-hide-remove ng-hide-remove-active when removed.
This works well since i found this line of CSS about ng-hide :
.ng-hide:not(.ng-hide-animate) {
display: none !important;
}
This mean your div will not be display when there is no animation. When there is an animation it will show and produce the animation.
1.4.0
In the official documentation Angular added this :
CSS Class-based Animations Class-based animations (animations that are
triggered via ngClass, ngShow, ngHide and some other directives) have
a slightly different naming convention. Class-based animations are
basic enough that a standard transition or keyframe can be referenced
on the class being added and removed.
For example if we wanted to do a CSS animation for ngHide then we
place an animation on the .ng-hide CSS class:
<div ng-show="bool" class="fade"> Show and hide me </div>
<button ng-click="bool=true">Toggle</button>
<style> .fade.ng-hide { transition:0.5s linear all; opacity:0; }
</style>
This mean that on 1.4.0 using ng-hide will simple add and remove ng-hide class.
**/!** In your codePen exemple i found that this line is still there in the CSS
.ng-hide:not(.ng-hide-animate) {
display: none !important;
}
Wich that each time you add ng-hide or remove it, you'll simple set "display:none" wich mean that no animation can be run. You'll need to override this behavior to use proper animations.
Doing this :
.parent.ng-hide {
display:block!important;
opacity:0;
}
Could do the trick but i'm not really sure that this is a safe way to do this.
At least i found the explanation, it would require more investigation to know how to deal with it in a proper way.
Hope it helped.