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不是sidePanel是side-panel;

2-你的css #sidePanel {}覆盖了.panel-hide和.panel-show，因为使用id的CSS选择器比class更重要

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")
})

CSS动画 - 显示和隐藏面板

2 个答案: