javascript - AngularJS ngAnimate 触发太快

Question

此时，p2 将在 p1 动画消失时动画进入，然后 p1 将被删除，p2 将在页面上出现故障。显然，所需的效果是 1 次淡出，然后 2 次淡入。

html:

 <nav>
    <a ng-click="changeView('p1')">p1</a>
    <a ng-click="changeView('p2')">p2</a>
 </nav>
 <div ng-view class="page">
 </div>

CSS:

.page {
    border:1px solid red;
    background-color:#eee;
    transition:all 1s linear;
}

.page.ng-enter {
    -webkit-opacity:0;
    opacity:0;
}

.page.ng-enter-active {
    -webkit-opacity:1;
    opacity:1;
}

.page.ng-leave {
    -webkit-opacity:0;
    opacity:0;
}

.page.ng-leave-active {
    -webkit-opacity:1;
    opacity:1;
}

是否有标准方法可以实现这一目标？我已经按照yearofmoo的建议尝试使用ng-enter-stagger，但仍然没有骰子。

Answer 1

不要进行过渡，而是尝试延迟到 50% 的动画。在 SASS 上，它可能看起来像:

// Keyframes, could be regular CSS but I've already got a SASS snippet
+keyframes( myOut )
  0%
    +opacity( 1 )
  50%, 100%
    +opacity( 0 )


+keyframes( myIn )
  0%, 50%
    +opacity( 0 )
  100%
    +opacity( 1 )

// Add classes
.page.ng-enter-active
    +animation( myIn 1s 1 )

.page.ng-leave-active
    +animation( myOut 1s 1 )