Geek Answers Handbook

Corner JS 1.3 ng-repeat animate move elements do not work

I have a list of elements (div), and when I click on any of them, I need them to move (with animation) to the top of the list. However, the move animation does not work for me. HTML code:

    <body ng-controller="myCtrl">
<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
    <div data-ng-repeat="item in items track by $index" 
        ng-click="move2Top($index)"
        class="my-repeat-animation boxy">
        {{item}}
    </div>
</div>
</body>

Javascript controller (contains Array prototype method for pushing an array to the top of the array)

var myApp = angular.module("MyApp", ["ngAnimate"]);

myApp.controller('myCtrl', function($scope){
    $scope.move2Top = function (idx) {
        console.log('moving element ' + idx);
            if (idx > 0)
                $scope.items.moveToTop(idx);
        };

    Array.prototype.moveToTop = function(from) {
        this.splice(0, 0, this.splice(from, 1)[0]);
    };
});

And CSS:

.my-repeat-animation.ng-enter, 
.my-repeat-animation.ng-leave, 
.my-repeat-animation.ng-move {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  position:relative;
}

.my-repeat-animation.ng-enter {
  left:-10px;
  opacity:0;
}
.my-repeat-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.my-repeat-animation.ng-leave {
  left:0;
  opacity:1;
}
.my-repeat-animation.ng-leave.ng-leave-active {
  left:-10px;
  opacity:0;
}

.my-repeat-animation.ng-move {
  opacity:0.5;
}
.my-repeat-animation.ng-move.ng-move-active {
  opacity:1;
}

.boxy {
  border: solid 1px;
  margin: 3px;
  padding: 3px;
  border-radius: 4px;
  width: 30px;
  text-align: center;
}

Please take a look at an example: http://plnkr.co/edit/asHtC5WOt9qnePyzPqk5?p=preview

The animated move just doesn't work.

+4
source share
2 answers

, Array.prototype. $scope.move2Top, , , .

var myApp = angular.module("MyApp", ["ngAnimate"]);

myApp.controller('myCtrl', function($scope){
    $scope.move2Top = function (idx) {
    console.log('moving element ' + idx);
    if (idx > 0)
        $scope.items.splice(0, 0, $scope.items.splice(idx, 1)[0]);
    };
});

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

0

, . , , . ng-move AngularJS ngRepeat -

, .

0

More articles:


All Articles