AngularJS淡入淡出視圖

我正在爲我的SPA創建一個天氣模塊Angular 1.4並嘗試淡入淡出當其他淡入淡出時，當用戶單擊按鈕檢索預測爲他們的城市。AngularJS淡入淡出視圖

我已將ngAnimate模塊注入到我的應用程序中，並試圖編寫一些CSS以及javascript。但是，無論我嘗試什麼，動畫都不起作用！也許我錯過了一些關於動畫如何在角度上工作的基本概念？

這裏是我的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; 
     }

這裏是我的主要頁面，在這裏我的意見帶到：

<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>

我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: '/'}) 
}])

視圖例子：

<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>

來源

2015-11-25 Evan Bechtol

查找'$ rootScope。$上（$ stateChangeStart，FUNC ...）'和'$ rootScope。$上（$ stateChangeSuccess，FUNC ...）''$ stateChange'。應放置在你的app.js的'.run'中 – Shinobi881

另外，不要使用ngRoute，你應該使用ui-router – Shinobi881

這些解決方案如何解決？ – laszlokiss88

好了，所以我最終計算出來。令人驚訝的是比我製作它容易得多！

，你必須做的第一件事就是注入ngAnimate到您的應用程序是這樣的：
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngAnimate']);
爲動畫創建CSS類，就像你的非角度/ javascript網站或應用程序：
.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;}
正常使用您的視圖並讓ngAnimate處理髒東西的細節！當視圖處於它們的ng-enter狀態或它們的ng-leave狀態時，ngAnimate將自動檢測。 這意味着當這些類被應用於你的進入/離開視圖時，動畫將被拾取！

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

來源

2015-11-25 21:52:51

AngularJS淡入淡出視圖

回答

相關問題