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 )

AngularJS ngAnimate太快射击了

1 个答案: