我正在尝试左转小节隐藏/显示过渡。这是我的代码:
的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>
答案 0 :(得分:1)
首先,css left
属性对正常流中的元素没有影响。您应该通过设置 static 以外的位置属性值来定位元素,以便left
生效。
其次,转换从一个值发生到另一个值。因此,如果您希望看到转换,请设置默认值,例如left:0
。
最后,如果您希望元素在删除它时设置动画,则不应在要切换的类中添加transition
属性,而是使用静态选择器设置它。
$("#click").click(function(e) {
e.preventDefault();
$('.left-side').toggleClass("collapse-left");
});
&#13;
.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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
你的意思是这样吗?
http://jsfiddle.net/99o4k67f/1/
$("#click").click(function(e) {
e.preventDefault();
$('.left-side').toggle('slow');
});
或更像这样:
http://jsfiddle.net/99o4k67f/2/
$("#click").click(function(e) {
e.preventDefault();
$('.left-side').animate({width:'toggle'},900);
});
是的,你不需要任何css:)