Angular CSS Animation won't work

Question

I have a system in place that retrieves dynamically retrieves stored messages from the server, the view for it is:

<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>

I then have 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%;
}

(this is just an extreme example transition so I can see the transition working)

However, upon a new object being entered into the array via $scope.messages.push(response); the new message simply pops onto the page and no animations take place, does anyone know what I've messed up?

Thanks :)

the syntax for transition shorthand should be all 1s linear if i remember correctly. Try fixing that and let me if it works. — Ilan Biala
– Ilan Biala, Commented Jul 10, 2013 at 19:15
No change. Still the same instant pop in. Thanks anyway though :) — Blam
– Blam, Commented Jul 10, 2013 at 19:26
css looks fine. could be your orderBy - take it out and see what happens. — rGil
– rGil, Commented Jul 10, 2013 at 19:47
Ahh.. seems I hadn't updated the file that loaded angular to use the latest version instead of the stable version which didn't have the animations. However now I'm only occasionally getting animations appearing.. — Blam
– Blam, Commented Jul 10, 2013 at 20:07

hzoo · Accepted Answer · 2013-07-10 20:03:53Z

1

Tried to copy paste your code into plnkr and it works fine. Do you have more code?

http://plnkr.co/edit/gi6h3adNMfoXkUdiN4lY

The only thing I added was a simple addMessage function to test the transition.

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

answered Jul 10, 2013 at 20:03

hzoo

1,37412 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blam Over a year ago

Odd, for me only sometimes does the item on that page transition in.. On Firefox 22.0 / Windows 7

hzoo Over a year ago

I tried Firefox and got the same problem (was using Chrome Canary before)

Blam Over a year ago

Well thank you anyway, proved the error was my fault. Working fine on my site now in chrome. :D

Collectives™ on Stack Overflow

Angular CSS Animation won't work

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related