CODEWITHSUNDEEP
angularjsng-animate
DazDylz
DazDylz

Reputation: 1096

AngularJS Animation fading goes wrong after a few view changes

So I have a nice fading effect on my AngularJS project, I want that everytime you change the view you get a fancy fade out and then a fade in with the new view. Well, the problem is that after a few view chaning, the fade out effect is gone?

YouTube video: My fancy fading

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

The first 20 seconds the fading is right, but then the fade out is gone.

This is my animation.css file:

.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;
}

And this is my index.html file, here has the <body> a class called 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>

I don't have many experience with ngAnimate but this is just weird?

Upvotes: 2

Views: 715

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

Try:

.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;
}

Explanation:

When the element starts to fade out, angular adds ng-leave class to your element. At this point, your opacity should be 1 and transition to 0 when ng-leave-active is added at the end of the animation.

Upvotes: 1

Related Questions