3

我正在尝试使用 Angular ui 路由器创建一个抽象的父状态，该路由器产生一个带有动画的模态掩码，然后在继承模态掩码的子状态中具有单独的动画。父状态将在 CSS 中执行进入和离开动画，但在子状态中会被抑制。

是否可以让子状态和父状态一起或依次执行 ng-enter 和 ng-leave 动画？

这是我的示例代码。

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/

4

0 回答 0