gpt4 book ai didi

css - Angular CSS 动画不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 14:49:12 28 4
gpt4 key购买 nike

我有一个系统可以从服务器动态检索存储的消息,它的 View 是:

<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); 将新对象输入到数组中时,新消息只是弹出到页面上并且没有动画发生,有人知道吗我搞砸了吗?

谢谢 :)

最佳答案

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

http://plnkr.co/edit/gi6h3adNMfoXkUdiN4lY

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

<button ng-click="addMessage()">Add Message</button>

关于css - Angular CSS 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17578923/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com