Использование AngularJS 'ngAnimate при удалении объекта из области действия

Очень простой вопрос: В AngularJS 1.2.x, возможно ли (и как) получить ngAnimate, чтобы стрелять при удалении объекта из области видимости?Использование AngularJS 'ngAnimate при удалении объекта из области действия

Вот пример Plunker:

http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

Код:

<body ng-controller="MainCtrl"> 
     <div ng-repeat="img in imgs" class="my-repeat-animation"> 
     <img ng-src="{{img}}" /> 
     <button class="btn btn-primary" ng-click="remove(img)">DELETE</button> 
     </div> 
    </body>

Сценарий:

app.controller('MainCtrl', function($scope) { 
    $scope.imgs = ['http://cache.mrporter.com/images/products/362812/362812_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/362807/362807_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/364762/364762_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/357020/357020_mrp_in_l.jpg'] 
    $scope.remove = function(image){ 
     var index = $scope.imgs.indexOf(image); 
     $scope.imgs.splice(index,1); 
    } 
});

Как вы можете увидеть, нажав на кнопку "Удалить" работает splice() на $scope.imgs. Я хотел бы оживить это, а не просто исчезнуть. Я использую переходы, только скопированные и вставленные с this Year Of Moo article, которые отлично работают при фильтрации области, но, очевидно, не при удалении из области видимости.

источник

2013-11-12 Jascination

Я не думаю, что это ссылка на правильный плункер. – lex82

app Убедитесь включает ngAnimate в качестве зависимости, файл angular-animate.js загружается после angular.js, и добавить этот пример анимации для вашего CSS:

/* Add animation */ 
.my-repeat-animation.ng-enter.ng-enter-active, 
.my-repeat-animation.ng-leave { 
    opacity: 1; 
    -webkit-transition: opacity 300ms linear; 
    -moz-transition: opacity 300ms linear; 
    transition: opacity 300ms linear; 
} 

/* Remove animation */ 
.my-repeat-animation.ng-leave.ng-leave-active, 
.my-repeat-animation.ng-enter { 
    opacity: 0; 
    -webkit-transition: opacity 300ms linear; 
    -moz-transition: opacity 300ms linear; 
    transition: opacity 300ms linear; 
}

Это оживит оба дополнения и изъятия из imgs.

источник

2013-12-02 11:17:37 Blaise

Использование AngularJS 'ngAnimate при удалении объекта из области действия

ответ

Смежные вопросы