Launching Entering and disabling animations in Angular Playing UI router layouts

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>