在显示新状态之前，如何让ui-router等待动画完成？

In this example, clicking route2 will cause "bar" to fade in at the same time "foo" fades out. How do I make "bar" fade in after "foo" fades out?

在此示例中,单击route2将导致“bar”在“foo”淡出的同时淡入。在“foo”逐渐淡出后,如何使“bar”淡入?

http://plnkr.co/edit/NsZhDL?p=preview

My use case: I have 2 full screen pages that I would like to do a fade transition between. I don't want both full screen pages showing at the same time. Thanks!

我的用例:我有2个全屏页面,我想在之间进行淡入淡出过渡。我不希望同时显示两个全屏页面。谢谢!

This is the css for the animation:

这是动画的CSS:

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1;
  /*padding-left: 0px;*/  
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  /*padding-left: 100px;*/
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

1 个解决方案

#1

Add this line of code to [ui-view].ng-enter in the css:

将这行代码添加到[ui-view] .ng-enter中的css:

transition-delay: 0.5s;