当当前版本发生变化时，我正在尝试一个很好的淡入淡出的渐变过渡。
在淘汰赛中，它很简单，但我无法在这里找到。请帮忙。
在淘汰赛中，它很简单，但我无法在这里找到。请帮忙。
以下代码将显示一个UL列表，该列表在单击LI元素时，在$ scope.currentVertical中被“绑定”到一个定价数组，$ scope.currentVertical被更改，并且UL列表相应更新。这工作正常，但是我想让整个#container div在$ scope.currentVertical变化时淡出并淡出。请帮忙…
我的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>
我的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',{
name: 'poalim',{
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;
};*/
}
您必须使用自定义或创建指令来启动像动画这样的高级DOM操作。
原文链接：https://www.f2er.com/angularjs/144726.html这里是您请求的动画的小提琴，我使用scope上的visible变量来触发衰落，并且$ timeout服务只有在fadeOut更改selectedItem时，可以通过一个超时和一个回调作为指令选项来改进…
小提琴：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',{
name: 'poalim',{
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>
