Angular JS - 我如何在模型更改上動畫？

我正在嘗試做一個很好的淡出+淡入淡出過渡當currentVertical更改。在淘汰賽這是如此簡單，但我不明白在這裏。請幫忙。Angular JS - 我如何在模型更改上動畫？

下面的代碼顯示了一個UL列表，該列表在「$ scope.currentVertical」中被綁定到一個pricings數組，當單擊一個LI元素時，$ 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', 
       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; 
    };*/ 
}

來源

2013-02-08 Uri Abramson

您必須使用自定義或創建指令才能像動畫一樣啓動高級DOM操作。

下面是您要求的動畫的小提琴，我使用範圍內的visible變量觸發淡入淡出，$超時服務只在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', 
     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>

來源

2013-02-08 16:14:22 Guillaume86

有，爲什麼你設置UI的淡入切換到'visible'理由嗎？你不能直接將它設置爲'visible'就像$ scope。$ watch（'visible'，function（）{}）''，因爲'$ scope.visible'不會馬上改變。 – Hengjie 2013-02-19 09:51:02

指令通常不依賴父範圍中的命名約定，因此您可以在同一範圍內使用幾次相同的指令（例如綁定到visible1和另一個綁定到visible2）。 – Guillaume86 2013-02-19 10:37:31

這是一個很好但不贊成使用的方法，因爲Angular現在支持本地使用名爲ngAnimate的新指令的動畫。 – 2013-04-04 18:30:53

我建議你使用在AngularJS核心提供了新的ngAnimate指令。

更多here

來源

2013-04-04 18:30:01

ngAnimate似乎不支持對容器元素的slideUp/Down，因此你直接仍然是相關的http://jsfiddle.net/jv4cf6ex/ – bresleveloper 2015-01-19 09:41:55

Angular JS - 我如何在模型更改上動畫？

回答

相關問題