I have created an angular directive named 'cardViewer' that is designed to display images with animation. The directive enables the user to slide the image to the left when pressing the "prev" button and to the right when pressing the "next" button.
Initially, I attempted to accomplish this using the ng-switch directive, which only supports the .ng-enter and .ng-leave animation classes. However, I needed two ways to enter (from left and right) and two ways to leave (to left and right).
To address this issue, I implemented the ng-class approach in hopes of adding the toLeft class before the switch to apply a specific CSS animation. Unfortunately, it did not work as expected. When I pressed the "next" button twice, it functioned correctly; however, if I pressed "next," followed by "prev," the new image entered from the right direction while the old image left in the wrong direction.
The template structure of my directive consists:
<h1>hahaha</h1>
<div>
<button ng-click='prev()'>prev</button>
<button ng-click='next()'>next</button>
</div>
<div>current Card Index: {{displayCard}}</div>
<div class="card-container" ng-switch="displayCard">
...images with corresponding switch cases...
</div>
In the directive script:
angular.module('app', ['ngAnimate'])
.directive('cardViewer', function() {
// directive implementation
});
The applicable CSS styles are then defined including animations for entering and leaving the cards in different directions.
You can explore the full code sample on my Plunker page here: cardViewer
If you have any insights on what might be causing the incorrect behavior in my code or suggestions on how to achieve multiple ways of entering/leaving with ng-switch, please share your thoughts.