jquery - 媒体宽度> 768px 时显示隐藏 bootstrap 3 offcanvas 时的 CSS3 动画

Question

我正在使用 bootstrap generic offcanvas，它运行良好。但是，当屏幕宽度超过 768px 时，我想在 div 上使用 css3 同步动画展开折叠 sidebar。我想要css only method来做这个，如果css不工作，那么jquery也可以。

Here is what I tried到目前为止，这是一个 fullscreen view .

由于我为 #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%;
    }
}

JQUERY

$(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');
        });
    }
});

更新

1. 当屏幕分辨率大于 768px 时，切换按钮应该像两个列的切换宽度一样，即 #sidebar 和 .col-main div . #sidebar 需要用线性动画隐藏，而 .col-main' div 的宽度应该扩展到 100% 宽度，再次单击时反之亦然。
2. 当屏幕分辨率小于 768px 时，offcanvas 应该像通用的 Bootstrap Offcanvas 一样工作。模板。
3. 在调整浏览器大小时，脚本应该需要检查屏幕分辨率并按照上述 1 点和 2 点进行相应操作。

Answer 1

是你想要的吗？ 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

“更改持续时间后不设置动画 (...)”是什么意思？你是说“方向”？