Question

所以我对我的AngularJS项目有一个很好的淡化效果，我希望每当你改变视图时你会得到一个幻想淡出然后淡入新视图。嗯，问题是经过几次查看后，淡出效果消失了吗？

Plunker： http://embed.plnkr.co/gyBT1pEDorRNBgn4dTKI/preview

褪色的前20秒是正确的，但淡出消失了。

这是我的animation.css文件：

.main {
    -webkit-transition: all 0.4s ease-in-out 0.5s;  
    -moz-transition: all 0.4s ease-in-out 0.5s;  
    -o-transition: all 0.4s ease-in-out 0.5s;  
    transition: all 0.4s ease-in-out 0.5s;   
}

.main.ng-enter, .main.ng-leave, .ng-hide {
    opacity: 0;
    height: 0px;
}
.ng-enter-active .ng-leave-active{
    opacity: 1;
}

这是我的index.html文件，这里有<body>一个名为main的类

<!DOCTYPE html>
<html lang="nl" ng-app="tradePlace">
    <head>
        <title>Trade-place.nl</title>
        <meta charset="utf-8">
        <!-- Load CSS files -->
        <link href="./helpers/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="./helpers/css/style.css" rel="stylesheet" type="text/css">
        <link href="./helpers/css/animation.css" rel="stylesheet" type="text/css">

        <!-- Load AngularJS and jQuery -->
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
        <script type="text/javascript" src="./helpers/css/js/bootstrap.min.js" rel="stylesheet"></script>

        <script type="text/javascript">
            /* Debugmode Setting */
            var debugMode = true;
        </script>

        <!-- Load router -->
        <script type="text/javascript" src="./includes/routes/routes.js"></script>

        <!-- Load services -->
        <script type="text/javascript" src="./includes/services/registerService.js"></script>
        <script type="text/javascript" src="./includes/services/authService.js"></script>
        <script type="text/javascript" src="./includes/services/verifyService.js"></script>

        <!-- Load controllers -->
        <script type="text/javascript" src="./includes/controllers/indexCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/registerCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/activationInstrCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/activatorCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/homeCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/loguitCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/verifyOne2xsCntrl.js"></script>
        <script type="text/javascript" src="./includes/controllers/settingsCntrl.js"></script>
    </head>

    <body class="main" ng-view></body>
</html>

我对ngAnimate没有太多经验，但这很奇怪？

Answer 1

尝试：

.main {
   -webkit-transition: all 0.4s ease-in-out 0.5s;  
   -moz-transition: all 0.4s ease-in-out 0.5s;  
   -o-transition: all 0.4s ease-in-out 0.5s;  
    transition: all 0.4s ease-in-out 0.5s;   
}
.main.ng-enter, .main.ng-leave-active, .ng-hide { //use .ng-leave-active
    opacity: 0;
    height: 0px;
}
.ng-enter-active, .ng-leave{ //use .ng-leave
    opacity: 1;
}

<强>解释：

当元素开始淡出时，angular会将ng-leave类添加到元素中。此时，您的opacity应为1，并在动画结束时添加ng-leave-active时转换为0。

一些视图更改后，AngularJS动画渐隐出错

1 个答案: