像youtube一样滑动菜单

Question

我正在尝试创建一个像Youtube一样的幻灯片菜单（当您单击视频播放器中的设置时，该菜单，请参阅下面的gif）。

HTML代码

<div class="menu-box">
    <div id="panel-1" class="menu-panel active">
        <div class="menu-item"><span class="caption">Panel 1 - Item 1</span></div>
        <div class="menu-item"><span class="caption">Panel 1 - Item 2</span></div>
        <div class="menu-item"><span class="caption">Panel 1 - Item 3</span></div>
    </div>

    <div id="panel-2" class="menu-panel">
        <div class="menu-item"><span class="caption">Panel 2 - Item 1</span></div>
        <div class="menu-item"><span class="caption">Panel 2 - Item 2</span></div>
        <div class="menu-item"><span class="caption">Panel 2 - Item 3</span></div>
    </div>
</div>

CSS代码

.menu-box {
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    transition: width .15s, height .15s;
}

.menu-panel {
    display: none;
}

.menu-panel.active {
    display: table;
}

.menu-item {
    display: table-row;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-item .caption {
    display: table-cell;
    padding: 1em;
}

.menu-item .caption.right {
    text-align: right;
}

我的问题

要制作幻灯片效果，我可以使用css中的transform，但我将如何显示面板2？

面板的默认显示为none，如果我将显示设置为表格（当它处于活动状态时），菜单框将无法平滑调整大小。

所以..我的问题是在面板1到面板2之间进行良好的过渡（反​​之亦然）。

Answer 1

transition仅适用于数值。从display:none更改为display:table不适用于转换。

尝试使用transform代替。我为你做了一个例子

您还可以使用opacity隐藏元素，然后使用转换。

在下面的例子中。当您点击click me button时，第一个panel获取课程active并显示。然后当你点击它的任何一个元素时，第二个面板出现在左边

这只是一个帮助你的例子。让我知道它是否适合你

$("button").click(function(){
          $("#panel-1").addClass("active")
         $("#panel-1 .menu-item").click(function(){ 
                    $("#panel-2").addClass("active")
})
})

.menu-box {
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);

}

.menu-panel {

  transition:0.5s;
}
#panel-1 {transform:scaleY(0) ;transform-origin:top}
#panel-2{ transform:translateX(-100%)}
#panel-1.menu-panel.active {

      transform:scale(1);
}
#panel-2.menu-panel.active {

      transform:translateX(0);
}


.menu-item {
    display: table-row;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-item .caption {
    display: table-cell;
    padding: 1em;
}

.menu-item .caption.right {
    text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Click Me
</button>
<div class="menu-box">
    <div id="panel-1" class="menu-panel">
        <div class="menu-item"><span class="caption">Panel 1 - Item 1</span></div>
        <div class="menu-item"><span class="caption">Panel 1 - Item 2</span></div>
        <div class="menu-item"><span class="caption">Panel 1 - Item 3</span></div>
    </div>

    <div id="panel-2" class="menu-panel">
        <div class="menu-item"><span class="caption">Panel 2 - Item 1</span></div>
        <div class="menu-item"><span class="caption">Panel 2 - Item 2</span></div>
        <div class="menu-item"><span class="caption">Panel 2 - Item 3</span></div>
    </div>
</div>