CODEWITHSUNDEEP
javascriptcssanimation
sam
sam

Reputation: 2345

Add Css animation duration dynamically

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/

Upvotes: 0

Views: 2246

Answers (1)

vals
vals

Reputation: 64164

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

Upvotes: 1

Related Questions