2

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>

Improve this question
6
  • Lookup $rootScope.$on($stateChangeStart, func...) and $rootScope.$on($stateChangeSuccess, func...)``$stateChange. Should be place in the .run of your app.js Commented Nov 25, 2015 at 13:37
  • Also, instead of using ngRoute, you should go with ui-router Commented Nov 25, 2015 at 13:39
  • 1
    How would any of those solve his problem? Commented Nov 25, 2015 at 13:47
  • On the $stateChangeStart event you can grab HTML tags and set style attribute until the $stateChangeSuccess happens. Commented Nov 25, 2015 at 14:04
  • ui-router vs. ng-route -stackoverflow.com/questions/21023763/… Commented Nov 25, 2015 at 14:05

1 Answer 1

Reset to default
3

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

  1. 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']);

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

  3. 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.