Angular JS - 如何在模型更改时设置动画?
[英] Angular JS - How can i animate on model change?
本文介绍了Angular JS - 如何在模型更改时设置动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当 currentVertical 改变时，我正在尝试做一个很好的淡出+淡入过渡.在淘汰赛中它是如此简单，但我无法在这里弄清楚.请帮忙.
以下代码显示一个 UL 列表，当单击 LI 元素时，该列表绑定"到 $scope.currentVertical 中的定价数组，$scope.currentVertical 会更改，并且 UL 列表也会相应更新.这工作正常，但我希望整个 #container div 在 $scope.currentVertical 更改时淡出和淡入.请帮忙...
我的 html:
<h1>定价调查</h1><div ng-controller="VerticalsController"><div id="容器"><h2>{{currentVertical.title}}</h2><ul><li ng-repeat="pricing in currentVertical.pricings"><a ng-click="currentVertical.selectPricing(pricing)">{{pricing.name}}</a>
我的 JavaScript:
function VerticalsController($scope) {$scope.verticals = [{标题:'互联网'，价格:[{name: '网视',每月:23},{name: '热',每月:33},{名称:'012',每月:28}]},{标题:'蜂窝'，价格:[{name: 'cellcom',每月:20},{name: 'pelephone',每月:30},{name: '橙色',每月:25}]},{标题:'银行'，价格:[{name: 'leumi',每月:20},{name: 'poalim',每月:30},{name: '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 = function() {无功计数 = 0;angular.forEach($scope.todos, function(todo) {计数 += todo.done ?0 : 1;});返回计数；};*/}
解决方案
您必须使用自定义或创建指令来启动高级 DOM 操作，如动画.
这是您请求的动画的小提琴，我使用范围上的 visible 变量来触发淡入淡出，而 $timeout 服务仅在淡入淡出时更改 selectedItem，可以改进以传递超时和回调作为指令选项...
小提琴:http://jsfiddle.net/g/Bs66R/1/
JS:
function VerticalsController($scope, $timeout) {$scope.verticals = [{标题:'互联网'，定价:[{name: '网视',每月:23},{name: '热',每月:33},{名称:'012',每月:28}]},{标题:'蜂窝'，定价:[{name: 'cellcom',每月:20},{name: 'pelephone',每月:30},{name: '橙色',每月:25}]},{标题:'银行'，定价:[{name: 'leumi',每月:20},{name: 'poalim',每月:30},{name: '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 = function() {返回 {链接:函数(范围，元素，属性){scope.$watch(attrs.uiFadeToggle, function(val, oldVal) {if(val === oldVal) 返回；//跳过初始调用//console.log('change');元素 [val ?'淡入':'淡出'](1000)；});}}}angular.module('app', []).controller('VerticalsController', VerticalsController).directive('uiFadeToggle',fadeToggleDirective);angular.bootstrap(document.body, ['app']);angular.bootstrap(document.body, ['app']);
HTML:
价格调查
<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>
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>
这篇关于Angular JS - 如何在模型更改时设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
