文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS ngAnimate和animate.css

问AngularJS ngAnimate和animate.css
EN

Stack Overflow用户

提问于 2015-01-26 16:14:07

回答 1查看 352关注 0票数 0

我一直试图让我的动画工作正常使用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>

javascript

css

angularjs

animation

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-26 16:33:34

我想出来了。首先，我给..ng添加了背景颜色-- enter 和..ng-离开，我看到enter的内容被推到了play的内容下面，所以我想我会四处玩，这就是我想出来的：

.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索引设置为-1，所以它将出现在enter框架下。我设置的实际.slide-animate设置为绝对并填充屏幕，原因很简单，因为角在加载新内容时似乎创建了第二个视图，并在完成之后删除了旧的视图。因此，将位置设置为绝对允许内容彼此位于对方之上。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28154042

复制

相似问题

问AngularJS ngAnimate和animate.css
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS ngAnimate和animate.cssEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS ngAnimate和animate.css
EN