1

javascript で新しい要素を作成して body に追加し、css で自動的にアニメーション化することはできますか? これは私のテストページです

<body>

<script>
function menuMain(){
    Title = document.createElement("div");
    Title.style.left = "750px";
    Title.style.webkitTransition = "4s";
    Title.style.fontSize = "30px";
    Title.style.position = "fixed";
    Title.style.color = "red";
    Title.id = "titleid";
    Title.innerHTML = "Menu Title";
    document.getElementsByTagName("body")[0].appendChild(Title);
    Title.style.left = "200px";
}

menuMain();
</script>

</body>

left:200pxただし、750px から 200px にアニメーション化するのではなく、オブジェクトを に自動的に配置するだけです。Title.style.webkitTransition = "4s"要素を検査すると、要素のスタイルにあるため、機能することはわかっています

私も交換してみました

Title.style.left = "200px";

と

document.getElementById("titleid").style.left = "200px";

しかし、それは同じことをするだけです。

要素を手動で作成するときはわかっています。次に、アニメーション化されたJavaScriptで左に変更left:750pxしますleft:200px

<body>
<div id="titleid" style="-webkit-transition:4s;position:absolute;color:red;font-size:30px;left:750px;">Menu Title</div>
<script>
function menuMain(){
    document.getElementById("titleid").style.left = "200px";
}

menuMain();
</script>

</body>

しかし、これは私がやりたいことではありません。それで、それはおそらくどういうわけか？

4

1 に答える 1

0

トランジションだけが必要だと仮定して、jQuery アニメーションを見てみましょう: http://api.jquery.com/animate/

それはこのような些細なことになります。

于 2013-02-07T02:04:05.943 に答える