Launching Entering and disabling animations in Angular Playing UI router layouts

Question

Launching Entering and disabling animations in Angular Playing UI router layouts

I am trying to create an abstract parent state using angular ui router which creates a modal mask with animation and then in child states that inherit the modal mask in order to have a separate animation. The parent state will perform enter and drop animations in CSS, but this will be suppressed in child states.

Is it possible for child and parent states to animate ng-enter and ng-leave, either together or sequentially?

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>