This particular issue has been widely recognized and discussed multiple times in various forums. Despite the extensive search, I have not come across satisfactory solutions.
var aniApp = angular.module("aniApp", []);
aniApp.controller('mainCtrl', ['$scope',
function($scope) {
$scope.currentStep = 1;
$scope.show = function(step) {
$scope.currentStep = step;
}
}
]);.step-box {
width: 200px;
border: solid 1px silver;
padding: 20px;
}
.animate-show {
width: 200px;
border: solid 1px silver;
padding: 20px;
}
.animate-show.ng-hide-remove,
.animate-show.ng-hide-add {
display: block!important;
}
.animate-show.ng-hide-add {
animation: 1s flyOut;
}
.animate-show.ng-hide-remove {
animation: 1s flyIn;
}
@keyframes flyIn {
from {
left: 600px;
}
to {
left: 0;
}
}
@keyframes flyOut {
from {
left: 0;
}
to {
left: -600px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aniApp">
<div ng-controller="mainCtrl">
<div ng-show="currentStep === 1" class="step-box animate-show">
displaying step 1
</div>
<div ng-show="currentStep === 2" class="step-box animate-show">
displaying step 2
</div>
<div ng-show="currentStep === 3" class="step-box animate-show">
displaying step 3
</div>
<br/>
<a href="#" ng-click="show(1)">One</a>
<a href="#" ng-click="show(2)">Two</a>
<a href="#" ng-click="show(3)">Three</a>
</div>
</div>Click the link below to access my plunker:
http://plnkr.co/edit/q11n9F?p=preview
I am trying to achieve an effect where the text enters from the right side of the box and exits on the left. Surprisingly, accomplishing this seemingly simple animation has taken up most of my day :(
If anyone can identify why it is not functioning as expected, I would greatly appreciate your assistance.