angularjs - navigationend - Angular JS-¿Cómo puedo animar en el cambio de modelo?
router events subscribe angular 4 (2)
Estoy tratando de hacer una buena transición de fadeout + fadein cuando cambia el currentVertical. En los octavos de final fue muy simple, pero no puedo entenderlo aquí. por favor ayuda.
el siguiente código muestra una lista UL que está "vinculada" a una matriz de precios en $ scope.currentVertical cuando se hace clic en un elemento LI, se modifica $ scope.currentVertical y la lista UL se actualiza en consecuencia. Esto funciona bien, pero me gustaría que todo el div #container se desvanezca y desaparezca cuando se cambie $ scope.currentVertical. Por favor ayuda...
Mi 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>
mi 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;
};*/
}
Tiene que usar directivas personalizadas o creadas para iniciar la manipulación avanzada de DOM como animaciones.
Aquí hay un violín con la animación que solicitó, uso la variable visible en el alcance para desencadenar el desvanecimiento y el servicio $ timeout para cambiar solo el elemento seleccionado cuando fadeOut, podría mejorarse para pasar un tiempo de espera y una devolución de llamada como una opción directiva ...
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>