使用して作成したフェードアウトと私はメッセージのリストを持っているngのリピート

によって作成された要素を削除する方法：使用して作成したフェードアウトと私はメッセージのリストを持っているngのリピート

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

と私のNGを-HTMLのようになります。

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

を私はフェードアウトすることができますどのようにメッセージを削除して削除しますか？私はjQueryでそれを行う方法を知っていますが、どのようにAngularの方法でこれを行うことができますか？

JSFiddle

出典

2013-08-31 jcubic

これは参考になるかもしれませます。http：/ /code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate – Cherniv

あなたはいつ再会したいですか？数秒後にsetTimeoutの項目 –

@ArunPJohnyを移動してください。 – jcubic

AngularJS 1.1.4からスタート、ngAnimateディレクティブは、アニメーションをサポートするために追加されます。

あなたはこのようにそれを達成することができます：

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

そして、これが必要なCSSです：

.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

出典

2013-09-01 06:32:20 zsong

クリックやsetTimeoutのようにオンデマンドでアニメートすることは可能ですか？ – jcubic

@jcubic私はあなたが何をしたいのか分かりません。 ngAnimateを使用するとアニメーションが自動的に追加されます。 Btwでは、$ timeoutはスコープダイジェストを自動的に扱うので、setTimeoutの代わりに$ timeoutを使うべきです。 – zsong

あなたのデモをもう一度チェックし、私が欲しいと思うように削除する前にアニメショーをありがとう。 – jcubic

使用して作成したフェードアウトと私はメッセージのリストを持っているngのリピート

答えて

関連する問題