3

私はWeb開発に非常に慣れていないので、ボタンをクリックするとページを下に拡張するWebページを作成しようとしています。私はこのコードを含むこのリンクを見つけました：

HTML：

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">Click the button to append an item to the list</p>

<button onclick="myFunction()">Try it</button>

JavaScript：

function myFunction()
{
    var node=document.createElement("LI");
    var textnode=document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}

情報を追加します。表示されるだけでなく、アニメーション化するためにこれを実行したいと思います。どうすればいいですか？

ヘルプやチュートリアルは大歓迎です。ありがとうございました！

4

4 に答える 4

0

ブートストラップ折りたたみを使用することをお勧めします。

于 2013-01-13T02:59:41.530 に答える
0

jQueryについて少し読む必要がありますが、ここに必要なもののほとんどの説明があります：エフェクト付きの追加を使用するjQuery

原則は、最初にjQueryオブジェクトを作成することです。これは、追加する要素を表し、すぐに表示されないようにするスタイル設定があることを確認します（例display: none）。

次に、要素をページに追加し（この時点で、スタイル設定のためにブラウザーは要素をレンダリングしません）、最後にjQueryメソッドを使用して要素をアニメーション化して表示します。

于 2013-01-13T03:01:45.667 に答える
0

最も一般的な方法は、JavaScriptを使用してCSSスタイルを制御することです（これらは単なる例です）。

// controlling the opacity of an element
document.getElementById(yourElementId).style.opacity = 0.5;
// controlling the position(top) of an element
document.getElementById(yourElementId).style.top = 10;

実行したいアニメーションのJavaScriptのセットを作成し、そのコードをクリックで呼び出される関数に配置します。フェードイン効果の例は次のとおりです。

function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");

// fade-in effect. The opacity starts from zero, and increases through 10steps.
node.style.opacity = 0;
for (var i=1;i<=10;i++) {
    node.style.opacity = i/10;
}
node.style.opacity = 1;
// end of fade-in effect

node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}

（徹底的にテストしていないので、不安定になる可能性があります）

私の例はフェードインでしたが、あらゆるタイプの位置変更や色変更などに対して同じことを行います。

于 2013-01-13T03:02:33.483 に答える
0

Element.animate（）を使用できます。詳細については、こちらをお読みください。

例：

    const div = document.createElement('div');
    div.innerText = 'text'; 
    otherElenet.appendChild(div);
    div.animate([
        // keyframes
        { opacity: '0' },
        { opacity: '1' }
    ], {
        // timing options
        duration: 1000,
    });

注意、IEではサポートされていません

于 2020-09-10T14:26:41.117 に答える