javascript - 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

我已经更新了你的 fiddle : https://jsfiddle.net/ns1756ky/2/

1- 你的 javascript 错误，你的 id 不是 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;
}