Triggering Enter and Leave animations on Angular UI Router child views

Question

I'm trying to create an abstract parent state using angular ui router that produces a modal mask with an animation then in the child states that inherit the modal mask to have a separate animation. The parent state will execute an enter and leave animation in CSS, however this is suppressed in the child states.

Is it possible to have child and parent states to execute ng-enter and ng-leave animations either together or in sequence?

Here is my sample code.

angular.module('viewtest', ['ngRoute', 'ngAnimate', 'ui.router']);

angular.module('viewtest').config(Configuration);

Configuration.$inject = ['$stateProvider'];

function Configuration($stateProvider) {
  $stateProvider.state("Default", {
      url: "/"
    })
    .state("Modal", {
      template: "<div class='modal__mask'></div><div ui-view class='dialog' autoscroll='false'></div>",
      abstract: true
    }).state("Modal.Register", {
      url: "/Register",
      template: "<div class='modal__dialog'><h1>Register Here</h1></div>"
    }).state("Modal.Login", {
      url: "/Login",
      template: "<div class='modal__dialog'><h1>Login Here</h1></div>"
    });
}

.modal {
  transition: all 5s linear;
}
.modal.ng-enter .modal__mask {
  animation: backdropshow 5s;
}
.modal.ng-leave .modal__mask {
  animation: backdrophide 5s;
}
.dialog {
  transition: all 5s linear;
}
.dialog.ng-enter .modal__dialog {
  animation: dialogshow 5s;
}
.dialog.ng-leave .modal__dialog {
  animation: dialoghide 5s;
}
@keyframes backdropshow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backdrophide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes dialogshow {
  from {
    left: 100%;
    width: 0;
  }
  to {
    left: 0;
    width: 100%;
  }
}
@keyframes dialoghide {
  from {
    left: 0;
    width: 100%;
  }
  to {
    left: 100%;
    width: 0;
  }
}
.modal__mask {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: grey;
  z-index: 10000;
}
.modal__dialog {
  position: absolute;
  top: 50%;
  left: 100%;
  height: 45%;
  width: 0;
  margin-top: -150px;
  background-color: rgba(45, 45, 45, 0.95);
  z-index: 10001;
}

<div ng-app="viewtest">
  <h1> This is a view test </h1>
  <a href="#" ui-sref="Modal.Register">Register Button</a>
  <a href="#" ui-sref="Modal.Login">Login Button</a>
  <div ui-view class="modal" autoscroll="false"></div>
</div>

http://codepen.io/drmor9471/pen/LVzvYy/