I've been working on getting my animation to function correctly with AngularJS and animate.css. In order to achieve this, I set up the SASS in the following way:
.slide-animate {
&.ng-enter,
&.ng-leave{
}
&.ng-enter {
-webkit-animation: bounceIn 1s;
-moz-animation: bounceIn 1s;
-o-animation: bounceIn 1s;
animation: bounceIn 1s;
&.ng-enter-active {
}
}
&.ng-leave {
-webkit-animation: zoomOutLeft 1s;
-moz-animation: zoomOutLeft 1s;
-o-animation: zoomOutLeft 1s;
animation: zoomOutLeft 1s;
&.ng-leave-active {
}
}
}
Upon loading the page, I receive the bounceIn animation. However, when clicking a link, the zoomOutLeft animation is triggered, yet the subsequent view lacks any animation. Interestingly, if I reload that particular view when the browser is refreshed, it does execute the bounceIn animation.
Considering this brief overview, can anyone suggest what might be causing this issue?
The HTML structure is quite simple:
<html>
<head>
<link href="Content/foundation/normalize.min.css" rel="stylesheet" />
<link href="Content/foundation/foundation.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="Content/animate.min.css" rel="stylesheet" />
<link href="Content/core.min.css" rel="stylesheet" />
</head>
<body ng-app="sapphire">
<section class="slide-animate" ng-view></section>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-cookies.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-touch.min.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/app/controllers.js"></script>
<script src="scripts/app/services.js"></script>
</body>
</html>