为什么此过渡属性不适用于 css？

我的简单HTML DOC具有少量的CSS。转换有效，但我尝试过许多事情的过渡，它看起来像是我正在观看的教程的确切副本，我一直缺少的语法有问题，还是有其他导致它不起作用的东西？

<!DOCTYPE html>
<html>
    <head>
        <title>transition Learning</title>
        <meta charset="utf-8">
        <style>
            #testItem{
                background-color: blue;
                width: 80px;
                height: 80px;
                margin: 300px auto;
                transition: transform 600ms ease-in-out;
                transform: translate(200px,200px) rotate(45deg);
            }

        </style>
    </head>
    <body>
        <div id="testItem"></div>
    </body>
</html>

因为您没有任何过渡吗？（单击框）

document.getElementById("testItem").onclick = function () {
  this.classList.toggle('transition');
}

#testItem.transition {
  transform: rotate(90deg);
}
#testItem{
                background-color: blue;
                width: 80px;
                height: 80px;
                margin: 300px auto;
                transition: transform 2s ease-in-out;
                transform: translate(0,0) rotate(45deg);
            }

<div id="testItem"></div>

相关内容

最新更新

热门标签：