角JS - 我怎么能在动画模式的变革？ [英] Angular JS - How can i animate on model change?
问题描述
我试图做一个漂亮的淡出淡入+过渡时currentVertical变化。
在淘汰赛它是如此简单，但我想不出它在这里。请帮忙。
下面code上显示的UL列表，它是绑定到一个pricings阵列中的$ scope.currentVertical被点击一个LI元件时，则$ scope.currentVertical被改变并且UL列表相应地更新。这工作得很好，但我想，当$ scope.currentVertical被改变了整个#container的股利淡出淡入。请帮助...
我的HTML：
结果
＆LT;身体GT;
＆LT; H1＆GT;定价投票＆LT; / H1＆GT;
＆LT; DIV NG控制器=VerticalsController＆GT;
＆LT; DIV ID =容器＆GT;
＆LT; H2＆GT; {{currentVertical.title}}＆LT; / H＆GT; ＆LT; UL＆GT;
＆LT;李NG重复=定价currentVertical.pricings＆GT;
＆LT;一个NG点击=currentVertical.selectPricing（定价）＆GT; {{pricing.name}}＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
我的javascript：
函数VerticalsController（$范围）{ $ scope.verticals = [
{
标题：互联网，
pricings：
{
名称：'netvision'，
每月：23
}，
{
名称：'热'，
每月：33
}，
{
名称：'012'，
每月：28
}
]
}，
{
标题：'细胞'，
pricings：
{
名称：'塞康'，
每月：20
}，
{
名称：'Pelephone公司'，
每月：30
}，
{
名称：橙色，
每月：25
}
]
}，
{
标题：'银行'，
pricings：
{
名称：'leumi'，
每月：20
}，
{
名称：'poalim'，
每月：30
}，
{
名称：'benleumi'，
每月：25
}
]
}]; $ scope.selected = [
]; $ scope.currentIndex = 0;
$ scope.currentVertical = $ scope.verticals [0]; $ scope.selectPricing =功能（定价）{
$ scope.selected.push（定价）;
$ scope.currentIndex ++;
$ scope.currentVertical = $ scope.verticals [$ scope.currentIndex];
}; /*$scope.remaining =功能（）{
变种数= 0;
angular.forEach（$ scope.todos，功能（待办事项）{
数+ = todo.done？ 0：1;
}）;
返回计数;
}; * /
}
您必须使用自定义或创建指令启动先进的DOM操作如动画。
下面与您要求的动画小提琴，我使用可见变量的范围，以触发褪色和$暂停服务，只改变则selectedItem的时候淡出，它可能改进传递超时和回调作为指令选项...
小提琴： http://jsfiddle.net/g/Bs66R/1/
JS：
函数VerticalsController（$范围，$超时）{ $ scope.verticals = [{
标题：互联网，
pricings：[{
名称：'netvision'，
每月：23
}，
{
名称：'热'，
每月：33
}，
{
名称：'012'，
每月：28
}]
}，
{
标题：'细胞'，
pricings：[{
名称：'塞康'，
每月：20
}，
{
名称：'Pelephone公司'，
每月：30
}，
{
名称：橙色，
每月：25
}]
}，
{
标题：'银行'，
pricings：[{
名称：'leumi'，
每月：20
}，
{
名称：'poalim'，
每月：30
}，
{
名称：'benleumi'，
每月：25
}]
}]; $ scope.selected = [
]; $ scope.currentIndex = 0;
$ scope.currentVertical = $ scope.verticals [0]; $ scope.selectPricing =功能（定价）{
$ scope.selected.push（定价）;
$ scope.currentIndex ++;
$ scope.visible = FALSE; $超时（函数（）{
$ scope.currentVertical = $ scope.verticals [$ scope.currentIndex];
$ scope.visible = TRUE;
}，1000）;
}; $ scope.visible = TRUE;
}VAR fadeToggleDirective =功能（）{
返回{
链接：功能（范围，元素，ATTRS）{
范围。$腕表（attrs.uiFadeToggle，功能（VAL，OLDVAL）{
如果（VAL === OLDVAL）回报; //跳过inital电话
//执行console.log（'变'）;
元素[VAL？ 淡入'：'淡出']（1000）;
}）;
}
}
}angular.module（'应用'，[]）控制器（'VerticalsController'，VerticalsController）.directive（'uiFadeToggle'，fadeToggleDirective）。angular.bootstrap（document.body的，['应用']）; angular.bootstrap（document.body的，['应用']）;
HTML：
＆LT; H1＆GT;定价投票＆LT; / H1＆GT;
＆LT; DIV NG控制器=VerticalsController＆GT;
＆LT; DIV ID =容器的UI褪色曲肘=看得见＆GT;
＆LT; H2＆GT; {{currentVertical.title}}＆LT; / H＆GT; ＆LT; UL＆GT;
＆LT;李NG重复=定价currentVertical.pricings＆GT;
＆LT;一个NG点击=selectPricing（定价）＆GT; {{pricing.name}}＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
i'm trying to do a nice fadeout+fadein transition when the currentVertical changes. in knockout it was so simple but i can't figure it out here. please help.
the following code displays a UL list which is "bound" to a pricings array in the $scope.currentVertical when an LI element is clicked, the $scope.currentVertical is changed and the UL list updates accordingly. This works fine, but i would like the entire #container div to fade out and fadein when $scope.currentVertical is changed. Please help...
My html:
<body>
<h1>Pricing Poll</h1>
<div ng-controller="VerticalsController">
<div id="container">
<h2>{{currentVertical.title}}</h2>
<ul>
<li ng-repeat="pricing in currentVertical.pricings">
<a ng-click="currentVertical.selectPricing(pricing)">{{pricing.name}}</a>
</li>
</ul>
</div>
</div>
</body>
my javascript:
function VerticalsController($scope) {
$scope.verticals = [
{
title:'internet',
pricings: [
{
name: 'netvision',
monthly: 23
},
{
name: 'hot',
monthly: 33
},
{
name: '012',
monthly: 28
}
]
},
{
title:'cellular',
pricings: [
{
name: 'cellcom',
monthly: 20
},
{
name: 'pelephone',
monthly: 30
},
{
name: 'orange',
monthly: 25
}
]
},
{
title:'banks',
pricings: [
{
name: 'leumi',
monthly: 20
},
{
name: 'poalim',
monthly: 30
},
{
name: 'benleumi',
monthly: 25
}
]
}];
$scope.selected = [
];
$scope.currentIndex = 0;
$scope.currentVertical = $scope.verticals[0];
$scope.selectPricing = function(pricing) {
$scope.selected.push(pricing);
$scope.currentIndex++;
$scope.currentVertical = $scope.verticals[$scope.currentIndex];
};
/*$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};*/
}
You have to use custom or create directives to start advanced DOM manipulation like animations.
Here's a fiddle with the animation you requested, I use the visible variable on scope to trigger fading and the $timeout service to only change the selectedItem when fadeOut, it could be improved to pass a timeout and a callback as a directive option...
Fiddle: http://jsfiddle.net/g/Bs66R/1/
JS:
function VerticalsController($scope, $timeout) {
$scope.verticals = [{
title:'internet',
pricings: [{
name: 'netvision',
monthly: 23
},
{
name: 'hot',
monthly: 33
},
{
name: '012',
monthly: 28
}]
},
{
title:'cellular',
pricings: [{
name: 'cellcom',
monthly: 20
},
{
name: 'pelephone',
monthly: 30
},
{
name: 'orange',
monthly: 25
}]
},
{
title:'banks',
pricings: [{
name: 'leumi',
monthly: 20
},
{
name: 'poalim',
monthly: 30
},
{
name: 'benleumi',
monthly: 25
}]
}];
$scope.selected = [
];
$scope.currentIndex = 0;
$scope.currentVertical = $scope.verticals[0];
$scope.selectPricing = function(pricing) {
$scope.selected.push(pricing);
$scope.currentIndex++;
$scope.visible = false;
$timeout(function(){
$scope.currentVertical = $scope.verticals[$scope.currentIndex];
$scope.visible = true;
}, 1000);
};
$scope.visible = true;
}
var fadeToggleDirective = function() {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.uiFadeToggle, function(val, oldVal) {
if(val === oldVal) return; // Skip inital call
// console.log('change');
element[val ? 'fadeIn' : 'fadeOut'](1000);
});
}
}
}
angular.module('app', []).controller('VerticalsController', VerticalsController).directive('uiFadeToggle', fadeToggleDirective);
angular.bootstrap(document.body, ['app']); angular.bootstrap(document.body, ['app']);
HTML:
<h1>Pricing Poll</h1>
<div ng-controller="VerticalsController">
<div id="container" ui-fade-toggle="visible">
<h2>{{currentVertical.title}}</h2>
<ul>
<li ng-repeat="pricing in currentVertical.pricings">
<a ng-click="selectPricing(pricing)">{{pricing.name}}</a>
</li>
</ul>
</div>
</div>
这篇关于角JS - 我怎么能在动画模式的变革？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
