css - Angular CSS アニメーションが機能しない

Question

サーバーから保存されたメッセージを動的に取得するシステムを配置しています。そのビューは次のとおりです。

<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);と、ページにポップするだけでアニメーションは発生しません。私が何を台無しにしたか知っている人はいますか?

ありがとう ：）