$animate.enter/leave does not animate properly when animation property is defined by css's descandant selector

[jackysee]

I have a case that need to apply different animation style to a dynamically generated content that enter/leave the scene. The animation is defined in CSS like:

.slide-left [data-content] ng-enter { animation: ... }
.slide-left [data-content] ng-leave { animation: ... }

The html would be

<div class="container" ng-class="transitionStyle">
    <!--content add/remove dynamically by js-->
</div>

When add/remove content, the following is called

$scope.transitionStyle = 'slide-left';
...
$animate.leave(oldContent);
$animate.enter(newContent, $('.container'));

The problem is that if once the transition style has no animation (i.e. $scope.transitionStyle = ''), it will be remembered and the following change to transition style (e.g. $scope.transitionStyle = 'slide-left') cannot be applied.

Please check this plunker, if you click 'slide left' or 'slide right' first, the animation is fine. After you have clicked 'no style', the will be no animation even if you click 'slide left/right'.

Normally, I should apply the style to the dynamic content itself. But in this case the the dynamic content is generated and enter/leave by 3rd party library (ui-router) which I have no control over.