8

私はJavascriptを使用してdivを展開していますが、コンテンツが展開されると、非常に急激で、せいぜい非常に魅力的ではありません。このdivの展開を遅くし、BLAMよりも視覚的に展開する方法があるかどうか疑問に思いました。これで完了です。 

<script language="javascript"> 
function toggle_profile() {
    var ele = document.getElementById("toggleProfile");
    var text = document.getElementById("displayProfile");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "View Profile";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Profile";
    }
} 
                        </script>

                      <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p>
                      <br />
                  <div id="toggleProfile" style="display: none">
4

3 に答える 3

18

秘訣は、Javascriptでクラスを追加および削除することです...そして、次のようなCSS3トランジションを添付します。

div {
    -webkit-transition: height .25s ease;
       -moz-transition: height .25s ease;
            transition: height .25s ease;
}

これにより、すべてのdivに速度を制御できるトランジションが適用されます。もちろん、自分に適用するDOM要素を選択することもできます。

そして、私が使用する2つのjquery関数は次のとおりです。

$("#object").addClass("removeThis"); //hide
$("#object").removeClass("removeThis"); //show

しかし、指摘されているように、jQueryを使用することはできません。だからここに！

document.getElementById("object").className = "";
document.getElementById("object").className = "removeThis";

ここで、「＃object」はターゲットとするオブジェクトであり、「。removeThis」は、domタグのクラス属性に追加および削除するクラスです。これがcssでどのように見えるかです。

#object {
    height: 200px;
    /* ignoring other CSS */
}

.removeThis {
    height: 0;
}

あなたがそれを上下にスライドさせたいと仮定します。もう1つのトリックは、不透明度を使用するか、display：noneおよびdisplay：blockを使用することです。しかし、遊んでください。これがお役に立てば幸いです。

2012年以降の編集：メインスレッドで実行する作業を要求しているJavaScriptを使用しているため、代わりに変換でアニメーション化することでコンポジタースレッドを利用できます。これは、heightスタイルプロパティのアニメーション化から逃れる方法を理解できる場合です。

于 2012-10-26T20:46:18.263 に答える
3

車輪の再発明には本当に意味がありません。これは、Jqueryのslidetoggleを使用して非常に簡単に行うことができます。ページは次のとおりです：http：//api.jquery.com/slideToggle/

于 2012-10-26T20:44:49.460 に答える
1

overflow:hidden最良のトリックは、部門でCSSプロパティを使用することだと思います。これにより、divの高さまたは幅から外れたコンテンツが非表示になります。次に、スムーズなCSS遷移を使用して、分割の高さを簡単に増減できます。

ここでチュートリアルを読むことができます

于 2013-10-24T17:10:30.797 に答える