AngularJS fade view in/out

Question

I am working on creating a weather module for my SPA with Angular 1.4 and attempting to fade my a view out as the other fades in, when the user clicks a button to retrieve the forecast for their city.

I have injected the ngAnimate module into my application, and attempted to write some CSS, as well as javascript. However, the animation doesn't work no matter what I try! Maybe I'm missing some fundamental concept of how animations work in angular?

Here is my CSS:

        .animate-enter, 
        .animate-leave { 
            -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
            position: relative;
            display: block;
            overflow: hidden;
            text-overflow: clip;
            white-space:nowrap;
        } 

        .animate-leave.animate-leave-active,
        .animate-enter {
            opacity: 0;
            width: 0px;
            height: 0px;
        }

        .animate-enter.animate-enter-active, 
        .animate-leave {
            opacity: 1;
            width: 150px;
            height: 30px;
            opacity: 1;
        }

Here is my main page, where my views are brought in:

<body>

    <header>
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">AngularJS Weather</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/" id="home"><i class="fa fa-home"></i> Home</a></li>
            </ul>
        </div>
        </nav>
    </header>

    <div class="container" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ng-view></div>

</body>

My app.js:

    var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngAnimate']);

weatherApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'homeController'
    })
    .when('/forecast', {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })
    .when('/forecast/:days', {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })
    .otherwise({redirectTo: '/'})
}])

A view example:

<div class="home row">
<div class="col-md-6 col-md-offset-3">
    <h4>Forecast by City</h4>
    <div class="form-group">
        <input type="text" ng-model="city" class="form-control" />
    </div>
    <a href="#/forecast" class="btn btn-primary">Get Forecast &raquo;</a>
</div>

Lookup `$rootScope.$on($stateChangeStart, func...)` and `$rootScope.$on($stateChangeSuccess, func...)``$stateChange`. Should be place in the `.run` of your app.js — , Nov 25 '15 at 13:37
Also, instead of using ngRoute, you should go with ui-router — , Nov 25 '15 at 13:39
On the `$stateChangeStart` event you can grab HTML tags and set style attribute until the `$stateChangeSuccess` happens. — , Nov 25 '15 at 14:04
ui-router vs. ng-route -http://stackoverflow.com/questions/21023763/angularjs-difference-between-angular-route-and-angular-ui-router — , Nov 25 '15 at 14:05
Thanks for the input @Shinobi881 , but I think that this suggestion takes a bit of a different direction than I am attempting to go. — Evan Bechtol, Nov 25 '15 at 14:15

Evan Bechtol · Accepted Answer · 2015-11-25T22:31:17.183

Ok, so I ended up figuring it out. It was surprisingly much easier than I was making it!

The first thing that you have to do is to inject ngAnimate into your application like this:
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngAnimate']);
Create the CSS classes for your animation, just as you would for a non-angular/javascript website or application:
.days { padding: 5px 8px 5px 8px; } .home, .forecast { position: absolute; width: 100%; } @keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 0; } } @keyframes slideOutLeft { to { transform: translateX(-100%); } } @keyframes slideInRight { from { transform:translateX(100%); } to { transform: translateX(0); } } .ng-enter { animation: slideInRight 0.5s both linear, fadeIn 0.5s both linear; z-index: 8888;} .ng-leave { animation: slideOutLeft 0.5s both linear, fadeOut 0.5s both linear; z-index: 9999;}
Use your view normally and let ngAnimate handle the dirty-details! ngAnimate will automatically detect when views are in their ng-enter state or their ng-leave state. This means that when these classes are applied to your entering/leaving views the animations will be picked up!

<div class="container-fluid" ng-view></div>

AngularJS fade view in/out

1 Answers1

Linked