kullanarak oluşturduğunuz fadeout ve mesajların listesi var ng-tekrarı

yarattığı unsurları nasıl kaldırılır:kullanarak oluşturduğunuz fadeout ve mesajların listesi var ng-tekrarı

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); 
});

ve benim ng-html şu şekilde görünür:

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

Ben kısılması nasıl mesajlar ve bunları kaldırmak JQuery'de bunu nasıl yapacağımı biliyorum ama bunu Açısal yol kullanarak nasıl yapabilirim?

JSFiddle

kaynak

2013-08-31 jcubic

bu yararlı olacaktır olabilir: http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate – Cherniv

Ne zaman istersen Birkaç saniye sonra setTimeout öğesinde –

@ArunPJohny öğesini hareket ettirin. – jcubic

Başlat angularjs 1.1.4 den, ngAnimate direktif animasyon desteklemek eklenir.

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

Ve bu gerekli css:

Böyle bunu başarabilir

.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

kaynak

2013-09-01 06:32:20 zsong

Tıklamada veya setTimeout'ta olduğu gibi talep üzerine animasyon uygulamak mı gerekiyor? – jcubic

@jcubic Neyi başarmak istediğinizi bilmiyorum. NgAnimate kullanırsanız animasyon otomatik olarak eklenir. Btw, otomatik olarak kapsam sindirimi ile $ zaman aşımı fırsatları beri setTimeout yerine $ timeout kullanmalısınız. – zsong

Demosunu tekrar kontrol ettim ve animasyon şovunu istediğim gibi kaldırmadan önce teşekkürler. – jcubic

kullanarak oluşturduğunuz fadeout ve mesajların listesi var ng-tekrarı

cevap

İlgili konular