CSS动画 - 显示和隐藏面板

Question

我一直在尝试创建一个与offcanvas panel行为类似的面板。除此之外，我不希望我的小组推动我的其他内容。相反，我希望我的面板能够基本上滑入，甚至覆盖我的内容。我仍然希望面板占据容器的整个高度。

为了实现这个目的，我创建了这个Fiddle。其中，您会注意到我有一个“切换”按钮以及两个CSS类。这些类应该实现我正在寻找的幻灯片效果。不幸的是，它不起作用。在这个时候，我的CSS是这样的：

#side-panel { 
    height:100%; 
    width:250px; 
    background-color:#fff; 
    position:absolute; 
    top:0; 
    right:0; 
} 

.panel-hide { 
    right:250px; 
    -webkit-transition: 0.5s ease; 
    -moz-transition: 0.5s ease; 
    -o-transition: 0.5s ease; 
    transition: 0.5s ease; 
} 

.panel-show { 
    right:0; 
    -webkit-transition: 0.5s ease; 
    -moz-transition: 0.5s ease; 
    -o-transition: 0.5s ease; 
    transition: 0.5s ease; 
} 

我不知道问题是否与我的CSS，或者如果别的东西虽然。在我看来，我的CSS动画看起来是正确的。但是，我显然有不正确的地方。

Answer 1

我已经更新您的提琴： https://jsfiddle.net/ns1756ky/2/

1 JavaScript是错误的，你的id是不是侧面板的侧面板;

2 - 你的CSS #sidePanel {}是压倒.panel隐藏和.panel出现，因为使用CSS选择器ID比

类更重要

3 - 删除你的类，你添加另一个类前

var currentState = 'show'; 
window.toggle_click = function() { 
    if (currentState === 'show') { 
    $('#side-panel').removeClass('panel-show'); 
    currentState = 'hide'; 
    } else { 
    $('#side-panel').removeClass('panel-hide'); 
    currentState = 'show'; 
    } 
    $('#side-panel').addClass('panel-'+currentState); 
} 



.panel-hide { 
    right:250px !important; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

.panel-show { 
    right:0 !important; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

Answer 2

用更少的代码试试这个。使用已经在jQuery中构建的.toggleClass（）函数。 Fiddle

HTML

<div style="height:100%;"> 
    <div id="content-area" style="height:100%;"> 
    <nav class="navbar"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      Hello 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     </div> 
     </div> 
    </nav> 

    <div id="content-wrapper" style="background-color:beige; height:100%;"> 
     <div class="container-fluid" style="height:100%;"> 
     Welcome 
     <br /> 
     <p> 
      This is some paragraph of text. The purpose of this text is to serve as a visual indicator that the panel is sliding on top of the content instead of pushing it around. 
     </p> 
     <br /> 
     <button class="btn btn-mini btn-primary">toggle</button> 
     </div> 
     <div id="side-panel"> 
     <h3>Info</h3> 
     <p> 
      Here are some details that I need to share. This is basically an informational paragraph. The user can show or hide this information when they click the "toggle" button. 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

#side-panel { 
    height: 100%; 
    width: 250px; 
    background-color: #fff; 
    position: absolute; 
    top: 0; 
    right: 0; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

.panel-hide { 
    right: 250px !important; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

JS

$("button").click(function() { 
    $("#side-panel").toggleClass("panel-hide") 
})