1

私の状況をよりよく理解するために、このフィドルに行って見てください。フィドルのプレビューペインには、作成しているメニューのプレビューが表示されます。

メニュープレビューペイン

メニューの「チャンネル」をクリックすると、トランジション効果なしでメニューが表示されます。理由はわかりません。

これは関連するコードです：

.dropdown-menu {
    position: absolute;
    top: 36px;
    left: 0px;
    z-index: 1000;
    display: none;
    width: 550px;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    color: #222;

    /* See? */
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease;
}

私がそこで間違っていることについて何か考えはありますか？

4

3 に答える 3

1

これは、JavaScript が要素 (クリック後に表示される要素) の高さを変更していないためです。CSS は、高さの変化にのみ遷移アニメーションを適用します。

display:none;あなたの要素のjavascriptの変更はdisplay:block;、CSSからのトランジション効果が見られない理由です。

于 2012-12-14T12:44:28.120 に答える
0

このリンクを確認してくださいhttp://jsfiddle.net/rakesh_vadnal/7VuGY/1/

古いCSS：

.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;
display: none;
width: 550px;
padding: 0;
margin: 0;
list-style: none;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
height: 0;
}
.open  > .dropdown-menu {
display: block;
height: auto;
}

更新されたCSS：

.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;

width: 550px;
padding: 0;
margin: 0;
list-style: none;
overflow:hidden;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
height: 0;
}
.open  > .dropdown-menu {
display: block;
height:145px;
}
于 2012-12-22T05:44:33.550 に答える
0

はっきりしない場合は、ドロップダウンメニューにTwitterBootstrapを使用しています。そして、私が達成しようとしていたトランジション効果は、DropdownsではなくCollapseプラグインに付属しています。

于 2012-12-14T14:00:30.020 に答える