CSS动画-展示和隐藏面板

Question

CSS动画-展示和隐藏面板

3

我一直在尝试创建一个类似于离屏面板的面板，但是我不想让我的面板推动其他内容。相反，我希望我的面板基本上滑入、覆盖我的内容，甚至可能覆盖我的内容。我仍然希望面板占据容器的整个高度。

为了实现这个目标，我创建了此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动画看起来很正确。但是，显然我有一些错误。

- JQuery Mobile

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fdfey · Answer 1

我已经更新了你的编辑器： https://jsfiddle.net/ns1756ky/2/ 1- 你的 JavaScript 代码有误，id 应该是 side-panel 而不是 sidePanel；

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;
}

- SM Ahmed · 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")
})