我正在使用bootstrap通用offcanvas,它运行良好。然而,当屏幕宽度超过768px时,我想在两个div
s上都使用css3同步动画来展开和折叠sidebar
。我想使用css only方法来完成此操作,如果css不起作用,那么jquery也可以。
这是我迄今为止尝试的内容,这是一个全屏视图。
由于我在#sidebar
div中使用了width: 0;
和height: 0;
,所以它的动画效果不好。对于现有的offcanvas方法,有什么方法可以做到这一点吗?我不想更改HTML标记。
HTML
<!-- Navbar Tag Removed to reduce space -->
<!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-8 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<h4>Menu</h4>
<!-- Content Removed -->
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9 col-main">
<p>
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle
nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap.
Try some responsive-range viewport sizes to see it in action.</p>
</div>
<!-- Content Removed -->
<!--/row-->
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--/.container-->
CSS
html, body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
@media (min-width: 768px) {
html, body {
overflow-x: auto; /* allow scroll */
}
.container {
max-width: 100%;
width: 100%;
}
/*Off Canvas */
.sidebar-offcanvas, .col-main {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.side-toggle .sidebar-offcanvas {
left: -100%;
width: 0;
height: 0;
}
.side-toggle .col-main {
width:100%;
}
}
查询
$(document).ready(function () {
if ($(window).width() < 768) {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
}
if ($(window).width() > 768){
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('side-toggle');
});
}
});
$(window).resize(function () {
if ($(window).width() < 768) {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
}
if ($(window).width() > 768){
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('side-toggle');
});
}
});
更新
- 当屏幕分辨率大于768px时,切换按钮的作用应类似于两个列的切换宽度,即
#sidebar
和.col-main
div。#sidebar
需要使用线性动画隐藏,而.col-main'
div的宽度应扩展到100%宽度,再次单击时反之亦然 - 当屏幕分辨率小于768px时,offcanvas应该像一般的Bootstrap offcanvas模板一样
- 在调整浏览器大小时,脚本应该需要检查屏幕分辨率,并按照上面提到的1点和2点进行相应的操作
这是你想要的吗?http://jsbin.com/yageheruludo/4/edit
我更改了JS:
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active').toggleClass('side-toggle');
});
$(window).resize(function () {
if ($(window).width() < 768) {
$('.row-offcanvas').removeClass('animate');
} else {
$('.row-offcanvas').addClass('animate');
}
});
和CSS:
.sidebar-offcanvas, .col-main {
position: relative;
}
.animate .sidebar-offcanvas, .animate .col-main {
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.side-toggle .sidebar-offcanvas {
width: 0;
padding: 0;
overflow: hidden;
}
编辑
在第一个窗口调整大小之前,动画不起作用。
http://jsbin.com/yageheruludo/6/edit
将js更改为:
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active').toggleClass('side-toggle');
});
$(window).resize(function () {
if ($(window).width() < 768) {
$('.row-offcanvas').removeClass('animate');
} else {
$('.row-offcanvas').addClass('animate');
}
});
$(window).trigger('resize'); // added this line
什么是"更改持续时间后不设置动画(…)"?你的意思是"定向"?
部分问题在于resize
处理程序。每次调整窗口大小时,都会添加另一个单击处理程序,因此,如果调整窗口大小两次,则会有两个单击处理程来切换类两次,将其放回原来的位置。
应该更接近:
$(window).resize(function () {
if ($(window).width() < 768) {
$('.row-offcanvas').toggleClass('active');
}
if ($(window).width() > 768){
$('.row-offcanvas').toggleClass('side-toggle');
}
});
但即使这样也不太正确,因为它会在每个调整大小事件上切换类,所以当用户试图调整窗口大小时,div会在拖动窗口调整大小时不断变化。
也许你真正想要的是:
$(window).resize(function () {
if ($(window).width() < 768) {
$('.row-offcanvas').addClass('active');
$('.row-offcanvas').removeClass('side-toggle');
} else {
$('.row-offcanvas').removeClass('active');
$('.row-offcanvas').addClass('side-toggle');
}
});
我不知道这是否是整个问题,但它肯定是其中的一部分。
最后,在@matty给出的答案的帮助下,我管理了所需的输出。我还使用jquerycookie在刷新页面后保留侧边栏的视图状态(post-back)。
HTML标记就是这样
html, body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
@media (min-width: 768px) {
html, body {
overflow-x: auto; /* allow scroll */
}
.container {
max-width: 100%;
width: 100%;
}
/** Off Canvas **/
.sidebar-offcanvas, .col-main {
position: relative;
}
.animate .sidebar-offcanvas, .animate .col-main {
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.side-toggle .sidebar-offcanvas {
width: 0;
padding: 0;
overflow: hidden;
}
.side-toggle .col-main {
width: 100%;
}
}
@media screen and (max-width: 767px) {
/** Off Canvas **/
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -66.66666667%; /* 8 columns */
}
.row-offcanvas-left .sidebar-offcanvas {
left: -66.66666667%; /* 8 columns */
}
.row-offcanvas-right.active {
right: 66.66666667%; /* 8 columns */
}
.row-offcanvas-left.active {
left: 66.66666667%; /* 8 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 66.66666667%; /* 8 columns */
}
.row-offcanvas-left .sidebar-offcanvas {
margin-left: 15px;
}
}
此外,我使用jquery Cookie插件将侧边栏的折叠或展开状态存储在浏览器Cookie中。我使用的脚本是:
$(document).ready(function () {
var toggle = $.cookie('toggle');
if ($(window).width() > 768 && toggle === "hide") {
$('.row-offcanvas').addClass('side-toggle');
}
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active').toggleClass('side-toggle');
if ($('#sidebar').parent().hasClass('active')) {
$.cookie('toggle', 'hide');
}
if (toggle === "hide") {
$.removeCookie('toggle');
}
});
$(window).resize(function () {
if ($(window).width() < 768) {
$('.row-offcanvas').removeClass('animate');
} else {
$('.row-offcanvas').addClass('animate');
}
if ($(window).width() > 768 && toggle === "hide") {
$('.row-offcanvas').addClass('side-toggle');
}
});
$(window).trigger('resize');
});
JsBin Edit在这里,全屏预览在这里。如果您有任何疑问/澄清,请告诉我。
再次感谢matty把我带向正确的方向。