anglejs – Angular JS – 我如何在模特儿改变动画？

当当前版本发生变化时，我正在尝试一个很好的淡入淡出的渐变过渡。
在淘汰赛中，它很简单，但我无法在这里找到。请帮忙。

以下代码将显示一个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操作。

这里是您请求的动画的小提琴，我使用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>

anglejs – Angular JS – 我如何在模特儿改变动画？

猜你在找的Angularjs相关文章