So animieren Sie ng-repeat-Elemente relativ zu Klickereignissen, die die Änderung verursachen

Ich versuche, einen Benutzer zu animieren, Elemente aus verschiedenen Gruppen von Elementen auszuwählen. Das Element sollte von dem angeklickten Satz zu seiner neuen Position in der Liste der ausgewählten Elemente animiert werden.

Betrachten Sie in der folgenden Demo die rosa Kästchen als verfügbare Elemente und das umrandete Kästchen als Liste der ausgewählten Elemente (blaue Kästchen). Der Benutzer kann ein Element auswählen, indem er auf eines der rosa Kästchen klickt:

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>

Nun, es funktioniert irgendwie – aber ich verwende jQuery-ui, um die Startposition herauszufinden (Die Position der rosa Kästchen wird in einem responsiven Design vorsichtig sein) und die jquery animate-Methode, um das Element zu animieren.

Außerdem muss ich die angeklickte Richtung im Bereich speichern und ich setze sowohl die Anfangsposition als auch die Animation zur Endposition in der enter Ereignis-Listener.

Ich habe viel mit eingebauten Animationshaken in Winkeln gelesen und experimentiert, konnte aber keinen richtigen Weg finden, Elemente aus relativen/dynamischen Positionen zu animieren.

Gibt es einen besseren Weg, um die gleiche Benutzererfahrung auf eckige js-Weise zu erreichen?

wenn ich Ihre Frage richtig verstanden habe (bitte sagen Sie mir, wenn nicht); Ich denke, eine Möglichkeit, das Problem zu lösen, geht so:

unter der Annahme, dass die Größe (Breite) Ihrer Produkte konstant ist – auf 50 Pixel oder so eingestellt -; Sie können die Position der rosa Elemente auf absolut setzen; Verwenden Sie dann ng-repeat für rosa Elemente mit einem kurzen Attribut im ng-Stil innerhalb des HTML-Codes wie folgt:

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

und zu den gekauften Produkten: Anstatt ng-repeat für das Array “gekauft” zu verwenden, können Sie das Produkt in der Funktion “zu gekauften hinzufügen”, nachdem Sie das Produkt in das Array “gekauft” verschoben haben, einfach nach oben animieren : ‘der Höhenabstand zum umrandeten Element'” und “links” gleich {$scope.purchased.length*50 + ‘px’}. fügen Sie dann eine Klasse mit ng-class (mit einem Schalter) zum Färben und anderen CSS-Sachen hinzu … (Sie können auch den Übergang für Farbänderungen in Betracht ziehen. wie Sie wahrscheinlich wissen)

Ich denke auch, dass Sie mit einer ng-Klasse, die Klassen mit neuen “Top” -Werten hinzufügt, basierend auf: ($index> some- Nummer) und eine weitere ng-Klasse für das obere Element (das Element, das sich über dem umrandeten Element befindet), das seine Höhe ändert …

Ich hoffe, das war hilfreich

Aktualisieren:

leider hatte ich die frage nicht richtig verstanden. Aber wenn ich mir das Problem jetzt anschaue, denke ich, dass es eine Möglichkeit gibt, dies dynamischer zu tun.

innerhalb der $scope.purchase Funktion, mit der Sie Ihre Anweisung senden können $broadcast und das angeklickte Element wie folgt übergeben (für jedes Element auf Lager, entweder mit ng-repeat erstellt oder nicht):

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

und:

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

und fügen Sie in Ihre Direktive den Ereignis-Listener ein:

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

Ich denke, Sie können auch verwenden target.getBoundingClientRect() um die Position des Elements relativ zum Ansichtsfenster zu erhalten (.top , .left ,…) anstelle von jquery-ui’s .position falls Sie es wollen…

ist es näher an der Lösung?

Diese Lösung ist insofern eine Verbesserung, als sie das Hinzufügen von Informationen zum Umfang in der Kauffunktion überflüssig macht und das Mischen von Modelldaten und UI-Details vermeidet, indem eine “Quellen”-Direktive verwendet und Herkunftsinformationen in einer Controller-Eigenschaft gespeichert werden. Das Beispiel ist vereinfacht und kann natürlich verbessert werden. Der entscheidende Punkt ist, dass die zur Verwaltung des Prozesses erforderlichen Daten niemals über den Geltungsbereich offengelegt werden.

Wenn das Zielelement aus dem DOM entfernt werden soll (dh es ist Teil einer ng-Wiederholung), müsste diese Lösung leicht modifiziert werden, um die Startpositionen der Animation als Teil des monitor.click-Handlers zu berechnen und zu speichern, anstatt sie zu speichern das Zielelement selbst.

Die Methode der Animation erscheint mir willkürlich. Dieses Beispiel verwendet die jqueryUI-Animationsmethode des OP, aber es würde genauso gut mit CSS-Übergängen oder mit $animate funktionieren.

Ein vollständiges Beispiel ist hier

angular.module('app', [])
.controller('main', function($scope) {
  $scope.products = [{},{}];
  $scope.purchased = [{}];
  $scope.Purchase = function() {
    $scope.purchased.push({});
  };
})
.directive('source', function(){
  return {
    controller: function($scope) {
    }
  };
})
.directive('originator', function(){
  return{
    require: '^source',
    priority: 1,
    link:{
      pre: function(scope, element, attr, ctrl){
        element.on('click', function(evt){
          ctrl.target = evt.target;    
        });
      } 
    }
  };
})
.directive('sink', function(){
  return {
    require: '^source',
    link: function(scope, element, attr, ctrl){
      var target = ctrl.target;
      if(target){
        var $target = $(target);
        //animate from target to current position
        element.position({
            my: 'center',
            at: 'center',
            of: $target,
            using: function(pos, data) {
              $(this).css(pos);
              $(this).animate({
                top: 0,
                left: 0
              });
            }
          });
        ctrl.target = undefined;
      }
    }
  };
});