Angular JS - 我如何在模型更改上制作动画？

Question

Angular JS - 我如何在模型更改上制作动画？

Uri*_*son 20 angularjs angularjs-directive

当currentVertical改变时,我正试图做一个漂亮的淡出+淡入淡出过渡.在淘汰赛中它是如此简单,但我无法弄清楚这里.请帮忙.

以下代码显示UL列表,当单击LI元素时,$ scope.currentVertical中的pricings数组被"绑定",$ 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>

Run Code Online (Sandbox Code Playgroud)

我的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;
  };*/
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gui*_*e86 9

您必须使用自定义或创建指令来启动高级DOM操作,如动画.

这是你请求的动画的小提琴,我使用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',
      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']);

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

这是一个很好但被弃用的方法,因为Angular现在使用名为ngAnimate的新指令本机支持动画. (3认同)

Answer 2

Ken*_*nne 9

我建议您使用AngularJS Core中提供的新ngAnimate指令.

在这里阅读更多

归档时间：	12 年，7 月前
查看次数：	19276 次
最近记录：	11 年，6 月前