我一直在尝试创建一个类似于离屏面板的面板,但是我不想让我的面板推动其他内容。相反,我希望我的面板基本上滑入、覆盖我的内容,甚至可能覆盖我的内容。我仍然希望面板占据容器的整个高度。
为了实现这个目标,我创建了此Fiddle。在其中,您会注意到我有一个“切换”按钮和两个CSS类。这些类应该实现我正在寻找的滑动效果。不幸的是,它不起作用。目前,我的CSS如下:
为了实现这个目标,我创建了此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动画看起来很正确。但是,显然我有一些错误。