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 动画，当我按下链接时，我得到 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 ，所以它将显示在输入框下方。实际的 .slide-animate 我设置为绝对并填充屏幕只是因为 angular 似乎在加载新内容时创建了第二个视图全部完成后删除旧的。因此，将位置设置为绝对可以使内容相互叠加。

AngularJS ngAnimate和animate.css

1 个答案: