1

私はJavascriptにかなり慣れていないので、少しばかげたことをしている場合はお知らせください。ただし、要点は次のとおりです。

私は、新しい機能を非常に厳密に構築されたテンプレートに統合する作業を行っています (基本的に、プレーンテキストのリンクは 1 つしか取得できません)。これに対する私の回避策は、リンクを実際に必要な要素に置き換える onclick メソッドを追加する jQuery を追加することでした。

$(document).ready(function(){
    $("li a:contains('Search')").bind("click", replaceWithSearch);
});


function replaceWithSearch(){
    var searchWrapper = constructSearchBox("");
    this.parentNode.replaceChild(searchWrapper, this);
}

それはすべてうまくいきますが、私はここの UI 担当者と話をしており、彼らはこの置き換えのためにアニメーションを望んでいます。もちろん、彼らの目的は CSS アニメーションを使用することですが、replaceChild 操作に滑らかなフェードまたはスライド アニメーションを追加する方法がよくわかりません。私はこれについて正しい方法で考えていますか？もしそうなら、どのように正確にそのアニメーションを追加しますか?

4

1 に答える 1

2

CSS アニメーションを使用すると、次のようなことができます。

.your-selector {
    animation: fadeIn 400ms ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
}

これを示すフィドルは次のとおりです: http://jsfiddle.net/zt3QB/。これにより、DOM に挿入されるときに不透明度 0 から始まり、デフォルトの 1 になります。

jQuery を使用する場合:

function replaceWithSearch(){
    var searchWrapper = constructSearchBox("").css('opacity', 0);
    this.parentNode.replaceChild(searchWrapper, this);
    // Using setTimeout because sometimes the DOM is too fast...
    setTimeout(function() {
        searchWrapper.fadeTo(400, 1);
    }, 0);
}

私はjQueryのものをテストしていませんが、同様のことをしました. CSS バージョンを使用してプロジェクトを終了しました。

于 2013-07-24T14:41:30.590 に答える