Question

我正在学习角度，我对ng-view模板之间的动画有疑问。

当我点击模板链接时，当前模板和新模板（点击一个）会同时保持动画，使ng-view之后的内容跳过旧的和新的模板高度。

这是我的index.html：

<ul>
    <li><a href="#/">View 1</a></li>
    <li><a href="#/view2">View 2</a></li>
</ul>

<div>
    <div ng-view></div>
</div>

page.html（模板）

<div class="page">
    <div class="center"><!-- this div centers the content horizontally,
                             it has a fixed value (with margin:0 auto) which
                             will change with media querys -->

        <h1>view</h1>

    </div>
</div>

和CSS：

.ng-enter, .ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ng-enter {
    opacity: 0;
}

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

.ng-leave {
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

.page>div.center{
    width: 500px; /* fixed width, this value will change in media queryes*/
    margin: 0 auto;
}

New plunker

开始时视图1 显示。如何点击 View 2 首先淡出 View 1 ，然后淡入 View 2 ？

现在当我点击 View 2 时，它会在 View 1 淡出的同时启动淡入淡出，使ng-view之后的内容跳转到两个模板高度，我不想要。

正如@Dabbiemiller建议的那样，使用display:inline-block套装然后它会破坏我的横向居中 - plunker

Answer 1

拿这个：http://plnkr.co/edit/EcI5kBxo4pXCsh3th8Jh?p=preview

<div ng-view style="display:inline-block;"></div>

正如评论中所述，为您的过渡添加延迟：

.ng-enter{
  -webkit-transition: all 2s ease 1s;
  -moz-transition: all 2s ease 1s;
  -o-transition: all 2s ease 1s;
  transition: all 2s ease 1s;
}

.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

修改在Vucko的评论之后，说我的解决方案不适合他，因为内部div有一些固定的宽度，我建议使用position:absolute;新的解决方案here。

Answer 2

替换

.ng-enter, .ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ng-enter {
    opacity: 0;
}

使用以下代码

.ng-enter {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 0;
}

你不需要在两个事件（进入/离开）上制作动画，只需输入就可以进行同步动画，它会立即隐藏第一个视图，然后动画第二个视图。

http://plnkr.co/edit/iVSRrg9nBaDTtHUZcDDu

如果您需要一个又一个动画，则需要回调。为了避免重复，你可以在这里找到答案：

AngularJS css animation + done callback

Angular ng-view动画回调

2 个答案: