I have developed a system that retrieves stored messages from the server dynamically. The view for this system is structured as follows:
<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>
In addition, I have defined the animation behavior in my CSS file:
.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%;
}
(I have used an extreme example of transition to test the animations)
However, when a new message object is added to the array using $scope.messages.push(response);, the new message simply appears on the page without any animations. Can anyone help me identify what might be causing this issue?
Thank you :)