AngularJS淡出视图/出 [英] AngularJS fade view in/out
本文介绍了AngularJS淡出视图/出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的工作我的SPA与创建，天气模块的角1.4 并试图淡化我的一个观点出来作为其他变淡，当用户点击一个按钮来检索预测的城市。
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.
我已经注射了 ngAnimate 模块插入我的应用程序，并试图写一些CSS，以及JavaScript的。但是，动画不能正常工作，无论我怎么努力！也许我缺少的动画在角是如何工作的一些基本概念？
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?
这里是我的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>
推荐答案
好了，所以我最终计算出来。这是令人惊讶的比我使其更容易！
Ok, so I ended up figuring it out. It was surprisingly much easier than I was making it!
- ，你必须做的第一件事就是为注
ngAnimate到您的应用程序是这样的：
VAR weatherApp = angular.module（'weatherApp'，['ngRoute'，'ngResource'，'ngAnimate']）;
- 为动画创建CSS类，就像你对一个无棱角/ JavaScript的网站或应用程序：
.days {
填充：5像素8像素为5px加上了8px;
}
。家里，.forecast {
位置：绝对的;
宽度：100％;
}
@keyframes淡入{
0％{不透明度：0; }
50％不透明度{：.5; }
100％{不透明度：1; }
}
@keyframes淡出{
0％{不透明度：1; }
50％不透明度{：.5; }
100％{不透明度：0; }
}
@keyframes slideOutLeft {
为{变换：translateX（-100％）; }
}
@keyframes slideInRight {
从{变换：translateX（100％）; }
到{变换：translateX（0）; }
}
.ng输入{动画：slideInRight 0.5S线性，淡入0.5秒线性;的z-index：8888;}
.ng休假{动画：slideOutLeft 0.5S线性，淡出0.5S线性;的z-index：9999;}
- 正常使用您的视图，并让ngAnimate处理肮脏的细节！当视图在其
ngAnimate会自动检测到NG-输入状态或它们的NG-休假状态。的这意味着当这些类应用到您的进入/离开欣赏动画将有所回升的
＆LT;！DIV CLASS =盛器液NG-视图＆gt;＆LT; / DIV＆GT;
- The first thing that you have to do is to inject
ngAnimateinto 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-enterstate or theirng-leavestate. 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淡出视图/出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
