In my AngularJS application, I have implemented CSS animations for transitioning between states. The animations involve sliding content from left to right with specific timings and transforms.
.content.ng-enter,
.content.ng-leave
{
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
}
.content.ng-leave
{
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
}
.content.ng-enter
{
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromright;
}
.content.ng-leave.reverse
{
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
}
.content.ng-enter.reverse
{
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromleft;
}
However, I want the animation direction to change for specific navigations, such as moving from Section 3 to Section 2 or 1. This requires applying a different animation based on the current state and the next state of the application.
I currently have the ability to determine the current state using classes on the body tag:
<body ng-class="{ section1 : $state.includes('section1'), section2 : $state.includes('section2'), section3 : $state.includes('section3') }">Is there a way to dynamically apply the correct animation class based on the transition between states in AngularJS?