AngularJS fade view in/out

 

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>

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>
    • 链接地址: http://www.djcxy.com/p/77978.html

    上一篇: 角错误：错误：[$ injector：unpr]未知提供者：$ stateProvider

    下一篇: AngularJS淡入/淡出视图