在Angular UI路由器子视图上触发输入和离开动画

Question

我尝试使用角度ui路由器创建一个抽象的父状态，该路由器生成带动画的模态蒙版，然后在子状态中继承模态蒙版以获得单独的动画。父状态将在CSS中执行进入和离开动画，但这在子状态中被抑制。

是否可以让孩子和父母状态一起或按顺序执行ng-enter和ng-leave动画？

这是我的示例代码。

＆＃13;

＆＃13;

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>"
    });
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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