AngularJS - 将一个容器中的项目动画到另一个容器中答案

【问题标题】：AngularJS - animating items from one container into another containerAngularJS - 将一个容器中的项目动画到另一个容器中
【发布时间】：2014-04-29 02:44:06
【问题描述】：

我有两个 div，一个开始是空的，另一个有一些预定义的项目。单击一个列表中的项目时，另一个列表会将项目添加到其中。

我想要实现的是为一个列表中的项目设置动画，使其看起来物理移动到另一个列表。（我希望项目从右向左移动）。我不太了解 CSS 动画或 AngularJS 动画。在 jQuery 中，我可以在 div id 上调用 $().animate() 来修改属性。

我将如何在 AngularJS 中做同样的事情？

JS：

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {

  $scope.selectedItems = [];
  $scope.items = ['a', 'b', 'c'];

});

HTML：

<div ng-controller="Ctrl">

<div class='container'> 
  <div class='inline selected-container' >
    <div ng-repeat='selected in selectedItems track by $index'> <!-- I would like items to appear here after items from other container have finished moving -->
      {{selected}}
    </div>
  </div>

  <div class="inline">
    <!-- I would like to push these items left on click -->
    <div class='inline box' ng-repeat="item in items" ng-click="selectedItems.push(item);"> 
      {{item}}
    </div>
  </div>
</div>

</div>

这是我目前所拥有的链接：

http://plnkr.co/edit/TZPmsCcR1xMcPW4eIEf3?p=preview

【问题讨论】：

我认为最好的方法是在项目仍在一个列表中时为其设置动画，使其看起来加入另一个列表，然后切换列表动画完成后以编程方式。但我希望有更酷的方法。
read it.
@EliranMalka，我已经读过，这也没有解决手头的问题。
正确，我只是认为它有助于阐明事物。不是故意粗鲁的。

标签： css angularjs css-animations angularjs-animation

【解决方案1】：

我在此页面上阅读了关于 ng-animate 的不错解释：http://www.jvandemo.com/how-to-create-cool-animations-with-angularjs-1-2-and-animate-css/

基本上，您需要在 CSS 中定义动画，然后将 ng-enter 和 ng-leave 附加到您想要实现这些动画的类。

/* Define your Animation , or just download animate.css which has all these defined*/ 
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

您必须在 CSS 中将动画附加到您的元素：

/* Apply your animation, which will run on ng-repeat, ng-hide, ng-show, etc */
.item {
   /* this is the element you're animating  */
}
.item.ng-enter {  /* attach ng-enter */
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s; 
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}
.item.ng-leave { /* attach ng-leave */
    -webkit-animation: fadeOutLeft 1s;  /*  */
    -moz-animation: fadeOutLeft 1s;
    -ms-animation: fadeOutLeft 1s; 
    animation: fadeOutLeft 1s;
}

已更新：
http://plnkr.co/edit/TZPmsCcR1xMcPW4eIEf3?p=preview

【讨论】：