html - Bootstrap 侧边栏过渡不起作用

Question

我有以下用于 Bootstrap 侧边栏的 HTML，但我无法使“推送”转换正常工作。每当我触发 JavaScript 时，边栏就会在两种状态之间切换。我是否在正确的元素上放置了正确的过渡 CSS？

HTML:

<div class="wrapper">
    <div class="row row-offcanvas row-offcanvas-left">
        <!-- sidebar -->
        <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">

            <ul class="nav" id="logo">
            <li><a data-toggle="offcanvas" href="#"><i class="glyphicon glyphicon-option-vertical"></i> <span class="collapse in hidden-xs">
            <img class="img-responsive2" src="./Pension-Solutions-185x51.png">
            </span></a></li>
            </ul>


            <ul class="nav" id="menu">
                <li><a href="#"><i class="glyphicon glyphicon-stats"></i> <span class="collapse in hidden-xs">Work in progress</span></a></li>
                <li><a href="#"><i class="glyphicon glyphicon-th-list"></i> <span class="collapse in hidden-xs">Management information</span></a></li>
                <li><a href="#"><i class="glyphicon glyphicon-user"></i> <span class="collapse in hidden-xs">Member access</span></a></li>
                <li><a href="#"><i class="glyphicon glyphicon-dashboard"></i> <span class="collapse in hidden-xs">Membership statistics</span></a></li>
            </ul>

            <ul class="nav" id="logout">
            <li><a href="#"><i class="glyphicon glyphicon-share"></i> <span class="collapse in hidden-xs">Logout</span></a></li>
            </ul>
        </div>
        <!-- /sidebar -->

        <!-- main right col -->
        <div class="column col-sm-9 col-xs-11" id="main">

            <p>
                PAGE CONTENT
            </p>
        </div>
        <!-- /main -->
    </div>
</div>

CSS:

@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }

    #main {
        width: 1%;
        left: 0;
    }

    #sidebar .visible-xs {
       display:inline !important;
    }

    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
       transition: all 0.5s ease-in-out;
    }

    .row-offcanvas-left.active {
       left: 45%;
    }

    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: absolute;
       top: 0;
       width: 45%;
    }
} 


@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }

  .row-offcanvas-left.active {
    left: 3%;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: -3%;
    position: absolute;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }

  #main {
    left: 0;
  }
}

JavaScript:

$(document).ready(function() {

$('[data-toggle="offcanvas"]').click(function() {
    $('.row-offcanvas').toggleClass('active');
    $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});

})

Answer 1

过渡应该应用于 #sidebar 元素