當show hide bootstrap 3 offcanvas在媒體寬度> 768px時的CSS3動畫

Question

我正在使用bootstrap通用offcanvas工作正常。 但是，當屏幕寬度超過768px並且兩個div上的css3同步動畫時，我想展開折疊sidebar 。 我想要css only方法來做這個，如果css不工作，那么jquery也沒關系。

這是我到目前為止嘗試的 ，這是一個全屏視圖 。

因為我用width: 0; 和height: 0; 對於#sidebar div，它不是很好的動畫。 使用現有的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時，切換按鈕應該像兩個cols的切換寬度，即#sidebar和.col-main divs。 #sidebar需要用線性動畫隱藏，而.col-main'的寬度應該擴展到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

你是什​​么意思“改變持續時間后不動畫（......）”？ 你的意思是“方向”？

Answer 2

部分問題是你的resize處理程序。 每次調整窗口大小時，都會添加另一個單擊處理程序，因此如果您將窗口調整大小兩次，則會有2個單擊處理程序，它們會將類切換兩次，將其放回原位。

應該更接近：

$(window).resize(function () {
    if ($(window).width() < 768) {
        $('.row-offcanvas').toggleClass('active');
    }
    if ($(window).width() > 768){
        $('.row-offcanvas').toggleClass('side-toggle');
    }
});

但即使這樣也不太正確，因為它會在每個resize事件上切換類，因此當用戶嘗試調整窗口大小時，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');
    }
});

我不知道這是不是整個問題，但它絕對是它的一部分。

Answer 3

最后，我借助@matty給出的答案來管理所需的輸出。 我還使用jquery cookie在刷新頁面后保留側邊欄的視圖狀態（回發后）。

HTML標記就是這樣。 但是，我使用了以下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;
    }
    .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編輯在這里 ，全屏預覽就在這里 。 如果您有任何疑問/澄清，請告訴我。

再次感謝matty讓我朝着正確的方向前進。