0

我有一个系统可以从服务器动态检索存储的消息，它的视图是：

<div id= "messages" data-ng-controller="MessageController">
    <div class="message" data-ng-repeat="message in messages | orderBy:'timestamp':true" data-ng-animate="'animate-message'" >
            <div class="user">
                {{ message.user.username }}
            </div>
            <div class="title">
                {{ message.title }}
            </div>
            <div class="content" data-ng-bind-html-unsafe="message.content">
                {{ message.content }}
            </div>
    </div>
</div>

然后我在我的 CSS 文件中有：

.animate-message-enter {
    transition: 1s linear all;
    -moz-transition: 1s linear all;
    -webkit-transition: 1s linear all;
    -o-transition: 1s linear all;
    -ms-transition: 1s linear all;
    opacity:0;
    position:relative;
    left:-100%;
}

.animate-message-enter.animate-message-enter-active {
    opacity:1;
    left:0%;
}

（这只是一个极端的示例转换，所以我可以看到转换工作）

但是，当一个新对象通过$scope.messages.push(response);新消息输入到数组中时，它只是弹出到页面上并且没有动画发生，有谁知道我搞砸了什么？

谢谢 ：）

4

1 回答 1

1

尝试将您的代码复制粘贴到 plnkr 中，它工作正常。你有更多的代码吗？

http://plnkr.co/edit/gi6h3adNMfoXkUdiN4lY

我唯一添加的是一个简单的 addMessage 函数来测试转换。

<button ng-click="addMessage()">Add Message</button>
于 2013-07-10T20:03:53.307 回答