AngularJS ngAnimate 和 animate.css答案

【问题标题】：AngularJS ngAnimate and animate.cssAngularJS ngAnimate 和 animate.css
【发布时间】：2015-01-27 00:33:34
【问题描述】：

我一直在尝试使用 AngularJS 和 animate.css 让我的动画正常工作。所以，我像这样创建了 SASS：

.slide-animate {
    &.ng-enter, 
    &.ng-leave{
    }

    &.ng-enter {
        -webkit-animation: bounceIn 1s;
           -moz-animation: bounceIn 1s;
             -o-animation: bounceIn 1s;
                animation: bounceIn 1s;

        &.ng-enter-active {
        }
    }

    &.ng-leave {    
        -webkit-animation: zoomOutLeft 1s;
           -moz-animation: zoomOutLeft 1s;
             -o-animation: zoomOutLeft 1s;
                animation: zoomOutLeft 1s;

        &.ng-leave-active {
        }
    }
 }

当我的页面加载时，我得到 bounceIn 动画，当我按下链接时，我得到 zoomOutLeft 动画，但加载的视图没有动画。如果我在浏览器加载时重新加载该视图，它会执行 bounceIn 动画。

谁能从那个简洁的描述中告诉我可能出了什么问题？

我的 html 看起来像这样：

<html>
<head>
    <link href="Content/foundation/normalize.min.css" rel="stylesheet" />
    <link href="Content/foundation/foundation.min.css" rel="stylesheet" />
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <link href="Content/animate.min.css" rel="stylesheet" />
    <link href="Content/core.min.css" rel="stylesheet" />
</head>
<body ng-app="sapphire">
    <section class="slide-animate" ng-view></section>

    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-cookies.min.js"></script>
    <script src="scripts/angular-route.min.js"></script>
    <script src="scripts/angular-touch.min.js"></script>
    <script src="Scripts/angular-animate.js"></script>

    <script src="scripts/app/app.js"></script>
    <script src="scripts/app/controllers.js"></script>
    <script src="scripts/app/services.js"></script>
</body>
</html>

【问题讨论】：

尝试在 plunker 中放一个示例代码

标签： javascript css angularjs animation

【解决方案1】：

我想通了。首先，我在 .ng-enter 和 .ng-leave 中添加了背景颜色，我看到 enter 的内容被推到了 leave 的内容下方，所以我想我会玩，这就是我想出的：

.slide-animate {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    &.ng-enter, 
    &.ng-leave{
    }

    &.ng-enter {
        -webkit-animation: fadeIn 2s;
           -moz-animation: fadeIn 2s;
             -o-animation: fadeIn 2s;
                animation: fadeIn 2s;

        &.ng-enter-active {
        }
    }

    &.ng-leave {    
        z-index: -1;
        -webkit-animation: zoomOutLeft 1s;
           -moz-animation: zoomOutLeft 1s;
             -o-animation: zoomOutLeft 1s;
                animation: zoomOutLeft 1s;

        &.ng-leave-active {
        }
    }
 }

因为我将z-index设置为-1，所以会出现在输入框下方。实际的 .slide-animate 我设置为绝对并填充屏幕只是因为 angular 在加载新内容时似乎创建了第二个 view 并且全部完成后删除旧的。因此，将 position 设置为 absolute 可以让内容彼此重叠。

【讨论】：