Recently, I decided to explore angular animation and incorporate it into my project. However, I am facing difficulties as the animations are not working as expected.
Below is the relevant part of my HTML code:
<div class="wrapper">
<div ng-view class="view-animate"></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>
I have made sure that my app includes ngAnimate:
var myApp=angular.module('myApp', [
'ngAnimate',
'ngRoute', //myFiles]);
The CSS code that I am using (copied from the documentation) is as follows:
.wrapper{
margin: -10px auto -5px;
position: relative;
height: auto;
max-width: 1100px;
font-size: 0.7rem;
overflow: hidden;
}
.view-animate.ng-enter, .view-animate.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
display:block;
width:100%;
border-left:1px solid black;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.view-animate.ng-enter {
left:100%;
}
.view-animate.ng-enter.ng-enter-active {
left:0;
}
.view-animate.ng-leave.ng-leave-active {
left:-100%;
}
I would greatly appreciate any help or guidance on what might be going wrong in my implementation. Thank you!