Jak Fadeout i usunąć elementy stworzone przez NG-repeat

Mam listę wiadomości create używając:Jak Fadeout i usunąć elementy stworzone przez NG-repeat

var messages = ["Foo Bar", "Lorem Ipsum", "Dolor Sit Amet"]; 
app.controller('fooControler', function($scope) { 
    $scope.messages = [ 
     {"message": "Hello There"} 
    ]; 
    function insert() { 
     var random = Math.round(Math.random()*(messages.length-1)); 
     var message = messages[random]; 
     messages.splice(random, 1); 
     $scope.$apply(function() { 
      $scope.messages.push({message: message}); 
     }); 
     if (messages.length) { 
      setTimeout(insert, 5000); 
     } 
    } 
    setTimeout(insert, 5000); 
});

i moją NG-html wyglądać następująco:

<html ng-app="app"> 

<body ng-controller="fooControler"> 
    <header> 
     <div>You have {{messages.length}} messages</div> 
     <ul ng-repeat="message in messages"> 
      <li>{{message.message}}</li> 
     </ul> 
    </header> 
</body> 
</html>

Jak mogę Fadeout wiadomości i je usunąć? Wiem, jak to zrobić w jQuery, ale jak mogę to zrobić za pomocą metody Angular?

JSFiddle

Źródło

2013-08-31 jcubic

Może to będzie pomocne: http://code.angularjs.org/1.1/docs/api/ng.directive:ngAnimate – Cherniv

kiedy chcesz ponownie przenieść element –

@ArunPJohny w setTimeout po kilku sekundach. – jcubic

Rozpocznij od angularjs 1.1.4 dyrektywa ngAnimate dodaje wspierać animację.

Można osiągnąć to tak:

<ul ng-repeat="message in messages" ng-animate="'animate'"> 
    <li>{{message.message}}</li> 
</ul>

I to jest CSS potrzebne:

.animate-enter-setup, .animate-leave-setup { 
    -webkit-transition: 1s linear all; 
    /* Safari/Chrome */ 
    -moz-transition: 1s linear all; 
    /* Firefox */ 
    -ms-transition: 1s linear all; 
    /* IE10 */ 
    -o-transition: 1s linear all; 
    /* Opera */ 
    transition: 1s linear all; 
    /* Future Browsers */ 
} 
.animate-enter-setup { 
    opacity: 0; 
} 
.animate-enter-setup.animate-enter-start { 
    /* The animation code itself */ 
    opacity: 1; 
} 
.animate-leave-setup { 
    opacity: 1; 
} 
.animate-leave-setup.animate-leave-start { 
    /* The animation code itself */ 
    opacity: 0; 
}

Working Demo

Źródło

2013-09-01 06:32:20 zsong

Czy możliwe jest animowanie na żądanie, jak w przypadku kliknięcia lub w setTimeout? – jcubic

@jcubic Nie wiem, co chcesz osiągnąć. Animacja jest automatycznie dodawana, jeśli używasz ngAnimate. Btw, powinieneś użyć $ timeout zamiast setTimeout, ponieważ $ timeout automatycznie zajmuje się skrótem zakresu. – zsong

Sprawdziłem ponownie twoje demo i pokaz animacji przed usunięciem, jak chcę, dzięki. – jcubic

Jak Fadeout i usunąć elementy stworzone przez NG-repeat

Odpowiedz

Powiązane problemy