2

I've got a div element with ng-view, that works perfectly fine. I've been trying to do a simple slide using CSS Transition, and it seems like all of my animation efforts are useless, and the elements just appear/disappear in a blink. Tried both AngularJS 1.1.4 and 1.1.5, it doesn't help. Ideas anyone?

Here's the code:

home.html

 <div ng-view ng-animate="'animate'"></div>

animations.css

.animate-enter, .animate-leave { -webkit-transition:all 2s ease; -moz-transition:all 2s ease; -o-transition:all 2s ease; transition:all 2s ease; } .animate-enter { left: -100%; } .animate-enter.animate-enter-active { left: 0; } .animate-leave { left: 0; } .animate-leave.animate-leave-active { left: 100%; }
Improve this question
1
  • where's the controller? Commented Jul 21, 2013 at 8:14

3 Answers 3

Reset to default
1

You need to add a position:relative or position:absolute or even position:fixed to the .animate-enter,.animate-leave css block.

I setup a plunker to demonstrate this on ng-view http://plnkr.co/edit/eT2RyZm5bBjlLTOnAO8R?p=preview

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

Comments

0

Have you tried to change your home.html (ng-view tag) like this?

<div ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"></div>
Improve this answer

1 Comment

yup, doesn't seem to work. Also tried CSS Animations and it doesn't seem to work.
0

Well sorry for the trouble everyone and thanks again for helping.

This is a code I edited from someone else, and as I was updating the local angular.js file for the latest unstable version, I eventually found out that home.html gets the online file (that was linked to the stable version) and not the local one.

That pretty much solved the problem :}

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.