jquery - Css 转换不适用于 jquery

Question

我正在尝试使用过渡隐藏/显示左栏。这是我的代码:

JQuery:

$("[data-toggle='offcanvas']").click(function(e) {
    e.preventDefault();
    $('.left-side').toggleClass("collapse-left");
});

CSS:

.left-side.collapse-left {
    left: -220px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

HTML:

<aside class="left-side sidebar-offcanvas">
    <!-- my content-->
</aside>

Answer 1

首先，css left 属性对正常流中的元素没有影响。您应该通过设置 static 以外的位置属性值来定位 元素，以便 left 生效。

其次，转换发生在从一个值到另一个值的过程中。因此，如果您希望看到过渡，请设置一个默认值，例如 left:0。

最后，如果您希望元素在删除类时动画，则不应在被切换的类中添加 transition 属性，而应使用静态选择器设置它。

---

$("#click").click(function(e) {
  e.preventDefault();
  $('.left-side').toggleClass("collapse-left");
});

.left-side {
  position: relative;
  left: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.left-side.collapse-left {
  left: -220px;
}
div {
  min-height: 200px;
  max-width: 200px;
  background: #06F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">click</button>
<aside class="left-side sidebar-offcanvas">
  <div>This is test</div>
</aside>