Angular ng-view 动画回调

Question

我正在学习 Angular，我对 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

在开始时显示View 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>

正如 cmets 中所说，为您的转换添加延迟：

.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 有一些固定宽度，我建议使用 here 和 position:absolute; 的新解决方案。

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