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动画，当按下链接时，得到了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 个解决方案

解决方案1
0 已采纳 2015-01-26 16:33:34

AngularJS ngAnimate和animate.css

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-26 16:33:34

解决方案1
0 已采纳 2015-01-26 16:33:34