CSS transition animations on reactive changes in Meteor

Vote count:

0

I have been trying to get a simple fadeinRight animation when data changes in my meteor template. I have tried both animation hooks as normal cs transition packages (such as animation.css). However I keep running into the same tow limitations

• Animations either stop after the first data change or run infinitely (if I add infinite).

I have tried removing the class before adding it

          $('img').removeClass('animate fadeInRight');
         $('img').addClass('animate fadeInRight');

And have tried to somehow reset the iteration counter, which I have been unable to do. This is the way I have set it up now.

  {{#Animate}}
    <div class ="back"></div>

    <img src ="/koko{{image}}.jpg">

    <div class ="text">  {{story}}

    </div>

{{/Animate}}

And then add animate fadeInRight class when swiping a page (it's a book app)

"swipe .page": function (e, phase, direction, distance, duration, fingerCount){
    if (direction === "left" && distance > 20 && Session.get("image") < 7){
        image = Session.get("image") + 1
        Session.set("image", image)

        $('img').removeClass('animate fadeInRight');
         $('img').addClass('animate fadeInRight');
    }

    if (direction === "right" && distance > 20 && Session.get("image") > 1){
        image = Session.get("image") - 1
        Session.set("image", image)
    }

}

Currently this only triggers the animation when data changes the first time.

Hope you can help out, if any further code or info is needed please let me know! Thanks in advance,

Jasper

asked 1 min ago

Jaspermid

54

CSS transition animations on reactive changes in Meteor