3

私は 2 つの div を持っています。1 つは空で始まり、もう 1 つは定義済みの項目があります。一方のリストの項目をクリックすると、もう一方のリストに項目が追加されます。

私が達成したいのは、あるリストのアイテムをアニメーション化して、物理的に別のリストに移動するように見せることです。（アイテムを右から左に移動したい）。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

4

1 に答える 1

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

于 2014-03-21T18:22:32.990 に答える