Come dissolvenza e rimuovere gli elementi creati da NG-repeat

ho elenco dei messaggi di creare utilizzando:Come dissolvenza e rimuovere gli elementi creati da 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); 
});

e la mia ng-html simile a questa:

<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>

Come posso fadeout il messaggi e rimuoverli? So come farlo in jQuery ma come posso farlo usando il modo angolare?

JSFiddle

fonte

2013-08-31 jcubic

può essere questo sarà utile: http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate – Cherniv

quando vuoi sposta l'oggetto –

@ArunPJohny in setTimeout dopo alcuni secondi. – jcubic

Start dal AngularJS 1.1.4, è aggiunto il direttiva ngAnimate per sostenere l'animazione.

si può raggiungere in questo modo:

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

e questo è il css necessario:

.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

fonte

2013-09-01 06:32:20 zsong

È possibile animare su richiesta come su clic o in setTimeout? – jcubic

@jcubic Non so cosa vuoi ottenere. L'animazione viene aggiunta automaticamente se usi ngAnimate. A proposito, dovresti usare $ timeout invece di setTimeout dato che $ timeout si occupa automaticamente di scope digest. – zsong

Controllato di nuovo la tua demo e animazione mostra prima di rimuovere come voglio, grazie. – jcubic

Come dissolvenza e rimuovere gli elementi creati da NG-repeat

risposta

Problemi correlati