Angularjs Ng-просмотр анимации
Используя angularjs 1.4.3, я хотел бы применить анимацию перехода к моим представлениям при входе и выходе. Я использовал документацию angularjs ng-view, чтобы попытаться реализовать эти анимации. Я правильно перенаправил свои страницы, и все они выглядят просто отлично, но я не могу заставить эти анимации работать. Я не понимаю некоторую документацию, поэтому я могу быть совершенно не в том, как я выполнил этот кусок кода.
index.html
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
<body ng-app="App">
<main ng-controller="MainController" class="view-animate-container">
<div ng-view class="view-animate"></div>
</main>
</body>
CSS
.view-animate-container {
position:relative;
}
.view-animate {
padding:10px;
}
.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%;
}