角NG-观看动画回调 [英] Angular ng-view animation callback

问题描述

我学的角度，我有一个关于 NG-视图模板之间的动画问题。

I'm learning angular and I have a question about the animations between ng-view templates.

当我单击模板链接，当前模板和新（点击一个）保持动画的同时，使得后的内容NG-视图跳下去了新旧模板的高度。

When I click on the template link, the current template and the new one (clicked one) keeps animating simultaneously, making the content after the ng-view jump down for both old and new templates height.

这是我的index.html：

This is my 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即可（模板）

page.html (template)

<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;
}

新plunker

在开始的查看1 的显示。如何使，当我点击的查看2 的先淡出的查看1 的，然后淡入的查看2 的？

On start View 1 is shown. How to make that when I click on View 2 to first fade out View 1, and then fade in View 2?

现在，当我点击的查看2 的它的查看1 的淡出，使得内容后， NG-视图跳转为模板的高度，这是我不想要的。

Now when I click View 2 it start the fadein simultaneously with View 1 fading out, making the content after ng-view jump for both templates height, which I don't want.

由于@Dabbiemiller建议，使用显示：inline-block的的西装，但随后打破我的水平居中 - 的 plunker

As @Dabbiemiller suggested, using display:inline-block suits but then it breaks my horizontal centering - plunker

推荐答案

替换

.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;
}

具有以下code

with the following code

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

您不需要做这两项活动的动画（进入/离开），你可以只输入上，它不会让同步动画它会立即隐藏的第一个视图，然后动画第二。

you don't need to make animation on both events(enter/leave) you can make just on enter and it wont make the simultaneous animation it will hide the first view immediately and then animate the second .

http://plnkr.co/edit/iVSRrg9nBaDTtHUZcDDu

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

if you need one animation after another you need a callback. To avoid repetition you can find the answer here:

AngularJS CSS动画+做回调

这篇关于角NG-观看动画回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！