AngularJS淡入/淡出视图
我正在为Angular 1.4的 SPA创建一个天气模块，并试图在用户单击按钮检索其城市预测时淡入淡出视图。
我已将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 »</a>
</div>
好吧，所以我最终搞清楚了。 令人惊讶的是比我制作它容易得多！
ngAnimate注入到你的应用程序中，如下所示： var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngAnimate']); .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;} ng-enter状态或ng-leave状态。 这意味着当这些类被应用于你的进入/离开视图时，动画将被拾取！ <div class="container-fluid" ng-view></div>