Angular playground

HTML

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainController">
        <div ng-show="loading" class="animate">Carregando</div>
        <div ng-hide="loading" class="animate-in">Isso aqui só pode mostrar quando a div acima for oculta</div>
    </div>
</div>

CSS

.animate{
  transition: all 1s linear;
}
.animate-in {
  transition: all 1s linear;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}
.animate.ng-hide,
.animate-in.ng-hide{
  opacity:0;
  color:red;
}

.x{
  color:red;
}

.y{
  color: blue;
}

JavaScript

var module = angular.module("myApp", ['ngAnimate'])

.controller('MainController', function ($scope, $timeout) {
      $scope.loading = true;
      
      $timeout(function () {
           $scope.loading = false;
      }, 2000);
})