Ionic Framework animate.css slideInUp and SlideOutUp animation not working

Question

I have a single view like tinder which looks like

<div class="list card animated slideInUp current-image-item">
   <img src="{{imageSource}}">
   <button ng-click="sendFeedback(true)"> ClickMe </button>
</div>

When i click this button, the current(one and only card) should go up and fade out. And, i will update the imageSource in sendFeedback() function in controller to point to another url. Then the save div should slide in from bottom to up.

I'm using animate.css library to do the slideInUp and i'm adding something like this in sendFeedback().

var element = angular.element(document.querySelector('.current-image-item'));
element.addClass('fadeOutUp');
element.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
   var randomItem = Math.round(Math.random() * ($scope.feed.length - 1));
   element.removeClass('fadeOutUp');

   // update current song in scope
   $scope.imageSource = "http://google.com/img.png";
});

Can anyone help me to make this animation work?

Answer 1

You can create some sort of custom directive and use $animate to apply animate.css animations to your image:

<img src="{{imageSource}}" tinder-like>

I've added an attribute tinder-like to my image. This is going to be our directive defined in our module.

Since you want to fade-out the image before it changes we need to apply the animation before the source of our image show the new picture.

To do that we can use another custom attribute which will be bound to the property: imageSource.

<img picture="{{imageSource}}" ng-src="" tinder-like>

I've used the name picture but it could have been anything else.

Now the directive:

angular.module('app.directives', [])

    .directive('tinderLike', function($animate){
        var oldsource = "";
        return {
            restrict: 'A',
            link: function(scope, element, attrs){
                attrs.$observe('picture', function(value) {
                    if (oldsource !== value) {
                        $animate.addClass(element, 'animated fadeOutUp')
                            .then(function () {
                                $animate.removeClass(element, 'animated fadeOutUp');
                                return value;
                            })
                            .then(function(source){
                                attrs.$set('src', source);
                            });
                    }
                    oldsource = value;
                });
            }
        };
    });

We observe when the attribute picture changes:

attrs.$observe('picture', function(value) { 

})

If the value has changed (we've used a variable oldsource to keep track of that) we use $animate to add a class to our element:

$animate.addClass(element, 'animated fadeOutUp')

$animate.addClass returns a promise which, when resolve, will allow us to remove the classes added before:

$animate.removeClass(element, 'animated fadeOutUp')

Last thing to do is set the source for the image:

attrs.$set('src', source);

This is what it looks like

and this is the plunker.

If we wanted to apply the animation when the pictures changes, our directive would have been much simpler:

.directive('tinderLike', function($animate){
    var source = "";
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            attrs.$observe('src', function(value) {
                if (source !== value) {
                  $animate.addClass(element, 'animated slideInUp')
                    .then(function () {
                      $animate.removeClass(element, 'animated slideInUp');
                    });
                }
                source = value;
            });
        }
    };
});

since can observe the src attribute of our image directly.

This is the plunker for this other solution.

PS: I've included animate.css and use its animations.

PPS: I've used a services which fetches random images from http://api.randomuser.me.