1

本によると、以下の例はメニューをフェードインおよびフェードアウトするはずですが、代わりにメニューがすぐに消えます。どういうわけか早すぎるのが問題だと思いますが、アニメーション display: noneで言っているのでわかりません。display: block

灰色の div が消えるのではなく、スムーズにフェードアウトするにはどうすればよいですか? アニメーションに CSS のみを使用するソリューションが推奨されます。

CSS

a {
    color: white;
    text-align: center;
}

.bar {
    height: 20px;
    background: red;
}

.div {
    background: silver;
    padding: 10px;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    display: block;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    display: block;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

.hidden {
    display: none;
    -webkit-animation: fade 2s reverse;
    animation: fade 2s reverse;
}

.shown {
    display: block;
    -webkit-animation: fade 2s;
    animation: fade 2s;
}

HTML

<div class="bar">
    <a href="#" class="click">Click Me</a>
    <div class="div shown">
        <p>Hello</p>
    </div>
</div>

jQuery

$(function() {
    $div = $(".div");

    var menu = function () {
        if ( $div.hasClass("shown")) {
            $div.removeClass("shown");
            $div.addClass("hidden");
        } else {
            $div.removeClass("hidden");
            $div.addClass("shown");
        }

    }

    menu();

    $(".click").bind("click", menu);

});

フィドル: http://jsfiddle.net/hFdbt/1/

4

2 に答える 2

2

コメントで述べたように、jquery を使用することもできます。

jQuery

$(".click").on("click", function() {
    $(".div").fadeToggle("slow");
});

HTML

<div class="bar">
    <a href="#" class="click">Click Me</a>
    <div class="div shown">
        <p>Hello</p>
    </div>
</div>

CSS

a {
    color: white;
    text-align: center;
}

.bar {
    height: 20px;
    background: red;
}

.div {
    background: silver;
    padding: 10px;
    display: none;
}

新しいフィドル: http://jsfiddle.net/QvpS3/

于 2013-10-28T18:44:37.917 に答える
0

表示要素で遷移できないため (ブール値または列挙型と考えてください。true.5 がない場合と同様に、「true」と「false」しかありません)、他の方法を使用して非表示にする必要があります。エレメント。

このフィドル( http://jsfiddle.net/3n1gm4/Q5TBN/ ) では、max-heightプロパティを使用overflow: hiddenしtransitionて遅延を設定しました。

.hidden {
    -webkit-animation: fade 2s reverse;
    animation: fade 2s reverse;

    -webkit-transition: 0s all 2s; /* delay this the duration of the animation */
    transition-delay: 0s all 2s;
    max-height: 0;
    padding: 0;

    overflow: hidden;

}

.shown {
    -webkit-animation: fade 2s;
    animation: fade 2s;
    max-height: 5000px; /* some number way bigger than it will ever be to avoid clipping */
}

credits:画面上のトランジション: プロパティ

于 2013-10-28T19:43:45.860 に答える