Question

我正在尝试使用css CodePen Example

为div添加翻转效果

但是改变将是我将尝试通过javascript动态添加css动画。

这是我尝试过的。变换属性似乎正在起作用，但看动画发生的动画持续时间不起作用。关于那一部分的任何建议。我正确加入了吗？

            $('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/

Answer 1

您正在创建元素并同时更改其属性。没有变化可以过渡。

要转换为工作，您需要浏览器具有呈现的元素，然后将它们修改为新值。

延迟，即使是短暂的延迟也足够了：

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

动态添加Css动画持续时间

1 个答案: