Add Css animation duration dynamically

Question

I am trying to add flip effect for divs using css CodePen Example

But the change will be that I will be trying to add the css animation dynamically through javascript.

Here is what I have tried. The transform propery seems to be working, but the animation duration to see the animation happening is not working. Any suggestions on that part. am i adding the correctly?

            $('body').html('<div class="card-container"><div id = "myDiv" class="flipper"><div class="front"> <h1>Hello</h1></div><div id="backDiv" class="back"> <h1>World</h1></div></div></div>');



            document.getElementById("myDiv").style.transform = "rotateX(360deg)"
            document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)"
            document.getElementById("myDiv").style.msTransform = "rotateX(360deg)";
            document.getElementById("backDiv").style.transform =  'rotateX(180deg)';

            document.getElementById("myDiv").style.transition = 'transform 6s ease-out'

https://jsfiddle.net/Lsvwyx0c/

what do you mean is not working ? on your script it is 6 seconds while on the CSS it is 0.6 seconds. is that the problem ? — Gabriele Petrioli
– Gabriele Petrioli, Commented Jan 17, 2017 at 19:36

vals · Accepted Answer · 2017-01-17 20:33:00Z

1

You are creating the elements and changing their properties at the same time. There is no change to be transitioned.

For a transition to work, you need that the browser has the elements rendered, and then modify them to a new value.

A delay, even a short one, will be enough:

function change()  {

    document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)"
    document.getElementById("myDiv").style.msTransform = "rotateX(360deg)";
    document.getElementById("myDiv").style.transform = "rotateX(360deg)";
    document.getElementById("backDiv").style.transform =  'rotateX(180deg)';
    document.getElementById("myDiv").style.transition = 'transform 6s ease-out'
};                

window.setTimeout (change, 5);

fiddle

answered Jan 17, 2017 at 20:33

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add Css animation duration dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related