0

I am making a small library that animates divs with css transition. So far so good and I like it better than jquery animate because making more complex animations with animate make my code unreadable. Anyways here is my main function:

    this.effect = function (element, effect, delay) {
        var currentEffect = effect.shift();
        var currentDelay = delay.shift();
        var animationName = "animated " + currentEffect;
        var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

        $(element).addClass(animationName).one(animationEnd, function () {
//          $(this).removeClass(animationName);
            if ( effect.length > 0 ) {
                $(this).css('-webkit-animation-delay', currentDelay + 's' )
                display.effect( element, effect, delay )
            }
        })
    }

This piece of code takes "element" which may be div or anything printed in jquery notation, effect, which is an array of effects (from animate.css), and delay which is also an array with times delaying each animation. I call it like this:

display.effect(".title", [ "swing", "shake" ], [ 10, 11 ])

All that works perfectly fine without one small exception: If i want to slide div from outside a viewport to center of it (or anywhere) initial position would be bottom: -500px. After animation it has for example bottm: 500px. But when animation is over class that moved my div to 500px is removed so it goes again to -500px (or any other initial parameter), even if it wasnt set at all. Do you have any smooth idea how to make my animated element to stay with all the parameters keeped after animation finishes? Kalreg

Kalreg
  • 982
  • 1
  • 13
  • 27
  • since you have the element, why don't you change its property at the end of the animation using .css(), for instance? – zero point Mar 05 '16 at 23:45
  • i dont know which property is changed since each effect changes different properties (sometimes a lot of them). properties changed during the effect is being kept in css file – Kalreg Mar 05 '16 at 23:49
  • http://stackoverflow.com/questions/13981730/how-can-i-let-my-css3-animation-to-stay-at-its-animated-position-when-it-finishe – Meiko Rachimow Mar 05 '16 at 23:52
  • unfortunatelly this doesnt work for me since i need to remove the class. also fiddles that are in this link work as long as mouse is over the square. if i leave it animation comes back to its initial look :( (i had -webkit-animation-fill-mode: both; since the beginning) – Kalreg Mar 06 '16 at 00:09

0 Answers0