如何相对动画NG-重复的项目单击事件引起的变化 [英] How to animate ng-repeat items relative to click events causing the change

问题描述

我试图动画用户选择不同的项目组的项目。
该项目应该从点击设置动画到它在选择项目列表的新位置。

在下面的演示中，考虑粉红色框为可用的物品和镶上框，选择的项目（蓝框）的列表。用户可以通过点击任一粉色框选择一个项目：

\r

\r

angular.module（'测试'，['ngAnimate']）\r
  .controller（'testCtrl'，函数（$范围）{\r
    $ scope.products = [{}，{}，{}，{}];\r
    $ scope.purchased = [{}];\r
    $ scope.purchase =功能（DIR）{\r
      $ scope.direction = DIR\r
      $ scope.purchased.push（$ scope.products.pop（））;\r
    };\r
  }）\r
  .directive（'TESTDIR'，函数（$动画）{\r
    返回{\r
      链接：功能（范围，元素）{\r
        $ animate.on（ENTER键，元素，功能（元素相）{\r
          $目标= scope.direction =='左'？ $（'。股票：第一'）：$（'股票：最后一次。）;\r
          element.position（{\r
            我：'中心'，\r
            位置：中心，\r
            中：$的目标，\r
            使用：功能（POS数据）{\r
              $（本）的.css（POS）\r
              $（本）.animate（{\r
                顶：0，\r
                左：0\r
              }）;\r
            }\r
          }）;\r
        }）;\r
      }\r
    };\r
  }）;

\r

.stock {\r
  显示：inline-block的;\r
  宽度：50像素;\r
  高度：50像素;\r
  背景：暗粉红;\r
}\r
.stock.right {\r
  保证金左：100px的;\r
}\r
。产品{\r
  高度：50像素;\r
  宽度：50像素;\r
  边框：1px的固体;\r
}\r
.purchased {\r
  高度：60像素;\r
  的margin-top：100px的;\r
  边界：2px的点缀;\r
}\r
.purchased。产品{\r
  显示：inline-block的;\r
  保证金：5像素;\r
  背景：宝蓝;\r
}

\r

＆LT;脚本SRC =HTTPS：//$c$c.jquery。 COM / jQuery的-2.1.3.min.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/ui/1.11.2/jquery-ui.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.4.8/angular.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.4.8/angular-animate.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV NG-应用=测试NG-控制器=testCtrl＆GT;\r
  ＆LT; D​​IV CLASS =股票NG点击=购买（'左'）＆GT;＆LT; / DIV＆GT;\r
  ＆LT; D​​IV CLASS =股权NG点击=购买（'右'）＆GT;＆LT; / DIV＆GT;\r
  ＆LT; D​​IV CLASS =购买clearfix＆GT;\r
    ＆LT; D​​IV CLASS =产品NG重复=产品在购买的数据测试DIR＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

---

嗯，这样的作品 - 但我使用jQuery的用户界面，找出起始位置和jQuery动画的方法动画元素（粉红色盒子将在响应式设计警惕的位置）

我也有存储在范围内点击方向，我同时设置初始位置和动画结束位置的输入事件侦听器。

我一直在阅读和试验了很多建在角动画挂钩，但无法弄清楚动画从相对/动态位置的元素之有道。

有没有更好的方式来实现的角度JS的方式相同的用户体验..？

解决方案

如果我正确地理解你的问题（如果不告诉我）;我认为处理这个问题的一种方式，是这样的：

而假设你的产品的尺寸（宽）为常数-set到50像素或something-;您可以设置粉色元素的位置，以绝对的;然后用NG-重复粉色元素，用HTML内一个简短的NG-style属性是这样的：

 ＆LT; D​​IV NG重复=项产品NG式={'左'：$指数* 50 +'像素'}NG点击=添加-to-购买（$指数）＆GT;＆LT; / DIV＆GT;
 

和有关所购产品：而不是使用购买阵列NG重复，里面的添加到购买功能，推动产品的购买数组后，可以将产品简单的动画到的：和左等于{$ scope.purchased.length * 50 +'像素'}顶高度与边框的元件距离'。然后用纳克级（有切换）着色和其他的CSS的东西......添加一个类（你也可以考虑对颜色变化的过渡。你可能知道）

我也认为你可以处理不同的高度和台面的问题（在产品的数量将成为多个生产线的产能情况下）与纳克级在此基础上增加了班，新的顶值：（$指数>一些数），和另一纳克级为上端元件（这是在毗邻元件的顶部的元件），改变它的高度...

我希望这是有帮助的。

---

更新：

不幸的是我不理解这个问题很好。但看着现在的问题，我想有更多的动态这样做的方式。

在 $ scope.purchase 函数里，你可以用 $广播消息的指令并通过点击的元素

：像这样（对股票的任何元素，无论是它与NG-重复或不创建）

 ＆LT; D​​IV CLASS =股票NG点击=购买（$事件）＆GT;＆LT; / DIV＆GT;
 

和

  $ scope.purchase =函数（事件）{
  $ scope.purchased.push（$ scope.products.pop（））;
  。$ $范围广播（'purchaseHappened'，event.target）;
};
 

和您的指令里面，把事件侦听器：

 范围。在$（'purchaseHappened'，函数（事件，目标）{
     //捕获目标在这里，然后用它的位置，以动画的新元素......
}）
 

我想你也可以使用 target.getBoundingClientRect（）来获取相对于视（ .TOP ，。左，...），而不是jQuery的-UI的 .POSITION 如果你想...

是它更接近解决？

I'm trying to animate a user selecting items from different sets of items. The item should animate from the clicked set to it's new position in list of selected items.

In the below demo, consider the pink boxes as available items and the bordered box as the list of selected items (blue boxes). User can select an item by clicking on either of the pink boxes:

angular.module('test', ['ngAnimate'])
  .controller('testCtrl', function($scope) {
    $scope.products = [{}, {}, {}, {}];
    $scope.purchased = [{}];
    $scope.purchase = function(dir) {
      $scope.direction = dir
      $scope.purchased.push($scope.products.pop());
    };
  })
  .directive('testDir', function($animate) {
    return {
      link: function(scope, element) {
        $animate.on('enter', element, function(element, phase) {
          $target = scope.direction == 'left' ? $('.stock:first') : $('.stock:last');
          element.position({
            my: 'center',
            at: 'center',
            of: $target,
            using: function(pos, data) {
              $(this).css(pos);
              $(this).animate({
                top: 0,
                left: 0
              });
            }
          });
        });
      }
    };
  });

.stock {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: hotpink;
}
.stock.right {
  margin-left: 100px;
}
.product {
  height: 50px;
  width: 50px;
  border: 1px solid;
}
.purchased {
  height: 60px;
  margin-top: 100px;
  border: 2px dotted;
}
.purchased .product {
  display: inline-block;
  margin: 5px;
  background: dodgerblue;
}

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <div class="stock" ng-click="purchase('left')"></div>
  <div class="stock right" ng-click="purchase('right')"></div>
  <div class="purchased clearfix">
    <div class="product" ng-repeat="product in purchased" data-test-dir>
    </div>
  </div>
</div>

---

Well, it kind of works - but I'm using jQuery-ui to find out the starting position (The position of pink boxes will wary in a responsive design) and jquery animate method to animate the element.

Also I have to store the clicked direction in scope and I'm setting both the initial position and animating to end position in the enter event listener.

I have been reading and experimenting a lot with built in animation hooks in angular, but couldn't figure out a proper way to animate elements from relative/dynamic positions.

Is there a better way to achieve the same user experience in angular js way..?

解决方案

if I've understood your question correctly(tell me if not); i think one way to handle the problem, goes like this:

while assuming the size(width) of your products to be constant -set to 50px or something- ; you can set the pink elements' position to absolute; then use ng-repeat for pink elements, with a brief ng-style attribute inside the html like this:

<div ng-repeat="item in products" ng-style="{'left': $index*50 + 'px'}" ng-click="add-to-purchased($index)"></div>

and about the purchased products: instead of using ng-repeat on the "purchased" array, inside "add-to-purchased" function, after pushing the product to the "purchased" array, you can simply animate the product to the "top: 'the height distance to the bordered element'" and "left" equal to {$scope.purchased.length*50 + 'px'}. then add a class using ng-class (with a toggle) for coloring and other css stuff... (you can also consider transition for color changes. as you probably know)

i also think that you can handle different heights and tops problem(in case that the number of products becomes more than one line's capacity) with an ng-class which adds classes with new "top" values based on: ($index > some-number), and another ng-class for the upper element(the element that's on top of the bordered element), changing it's height ...

i hope this was helpful

---

Update:

unfortunately i hadn't understood the question well. but looking at the problem now, i think there is a way of doing this more dynamically.

inside the $scope.purchase function, you can message your directive with $broadcast and passing the clicked element like this (for any element in stock, either it's created with ng-repeat or not):

<div class="stock" ng-click="purchase($event)"></div>

and:

$scope.purchase = function(event) {
  $scope.purchased.push($scope.products.pop());
  $scope.$broadcast('purchaseHappened', event.target);
};

and inside your directive, put the event listener:

scope.$on('purchaseHappened', function(event, target) {
     //catch target in here, and then use it's position to animate the new elements...
})

i think you can also use target.getBoundingClientRect() to get the element's position, relative to the viewport (.top , .left ,...) instead of jquery-ui's .position if you want...

is it closer to the solution?

这篇关于如何相对动画NG-重复的项目单击事件引起的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！