Animation only works on the first page

ionic-v1
1

Hi guys,

I encounter a problem when I test my application on my nexus 5 or in Chrome. Animations only works on the first page.

I’m using firebase, so when I create a new task, it’s added to the page without reloading. If It is the first page I see, animation runs with no problem. However, if I come from another page, adding/leaving animations doe not work anymore (ionic animations for page still works)

Load on page A -> Task are loaded with animation -> Add element -> Element is added with animation.
Load on page A -> Task are loaded with animation -> Go to Page B -> Add element -> Element is added with no animation -> Go back to Page A -> Add element -> Element is added with no animation.

The scss:

@include keyframes(bounceOut) {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
}

%bounceOut {

    &.bounceOut,
    &.ng-leave {
        @include animation(bounceOut, .5s, 1);
    }

}

.list__tasks {
    @extend %bounceOut;
}

The directive calling the services (it’s an input at the top of the page, creating task when the value change, and reseting value after)

var $el = angular.element(el),
      $input = $el.find('input');

                $el.bind('change', function(event) {
                    var value = $input.val();

                    Lists.addTask(value);
                    $input.val('');
                    $input[0].blur();
                });

The services
Lists:

function addTask(name) {
   Tasks.addTask({name: name, done: false});
};

function getTasks(listId) {
    return tasks;
};

Tasks:

function addTask(task) {

            tasks.$add(task).then(function(ref) {
                var id = ref.name();
                console.log("added record with id " + id);
                return tasks.$indexFor(id); // returns location in the array
            });

        };

The controller:

function listCtrl($stateParams, Lists, list) {
        this.list = list; /* from resolve */
        this.tasks = Lists.getTasks(); /* return a firebase array, updated everytime I create a task */
                   
    };

I saw other threads encountering the same problem, but no fix

Thanks