Css转换不适用于jquery

我正在尝试左栏隐藏/显示转换。这是我的密码：

JQuery：

CSS:

HTML:

你是说像这样

或者更像这样：

---

顺便说一句，您不需要任何css：）

首先，css

left

属性对正常流中的元素没有影响。您应该通过设置除static之外的position属性值来定位元素，以便

left

生效

其次，从一个值过渡到另一个值。因此，如果希望看到转换，请设置默认值，例如

left:0

最后，如果希望元素在移除类时设置动画，则不应在被切换的类中添加

transition

属性，而应使用静态选择器对其进行设置

---

$（“#点击”）。点击（功能（e）{
e、 预防默认值（）；
$（'.left side'）.toggleClass（“折叠左”）；
});
。左侧{
位置：相对位置；
左：0；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-ms转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}
.左边，左边{
左：-220px；
}
div{
最小高度：200px；
最大宽度：200px；
背景：#06F；
}

点击
这是测试
那么代码中有什么问题呢？可能是一个简化的测试用例，作为一个代码片段或一把小提琴？到目前为止显示的代码应该可以工作。但是，我建议使用
translate
，这样您就可以潜在地将渲染卸载到GPU，并且不会导致大量的重新绘制。可能您没有将[data toggle='offcanvas']添加到另一个标记中。您试图制作一个jsfiddle:yah，但只是向左折叠。不在左上角LOL@Mamunshardar看第二把小提琴；）
$("[data-toggle='offcanvas']").click(function(e) {
    e.preventDefault();
    $('.left-side').toggleClass("collapse-left");
});

.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;
}

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

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

$("#click").click(function(e) {
    e.preventDefault();
    $('.left-side').animate({width:'toggle'},900);
});