7

我有使用以下命令创建的消息列表：

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 中做到这一点，但是如何使用 AngularJS 方式做到这一点？

JSFiddle

4

1 回答 1

3

从 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-01T06:32:20.010 回答