AngularJS ngAnimate 和 animate.css

Question

我一直在尝试使用 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 动画，当我按下 link 时，我得到 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>

Answer 1

我想通了。首先，我为 .ng-enter 和 .ng-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，它会出现在enter frame下面。实际的 .slide-animate 我设置为绝对并填充屏幕只是因为 angular 似乎创建了第二个 view 加载新内容时，并在所有内容完成后删除旧内容。因此，将 position 设置为 absolute 允许内容彼此重叠。

AngularJS ngAnimate 和 animate.css

AngularJS ngAnimate and animate.css

javascript

css

animation

angularjs