Css transition not working with jquery

Question

I am trying a left bar hide/show with transition. Here's my code:

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>

A reduced test case as a code snippet or a fiddle, perhaps? The code you've shown so far should work. However, I would suggest using translate so that you can potentially offload the rendering to GPU, and will not cause massive repainting. — Terry
– Terry, Commented Nov 21, 2014 at 9:25
may be your not added [data-toggle='offcanvas'] to aside tag — yugi
– yugi, Commented Nov 21, 2014 at 9:30

T J · Accepted Answer · 2014-11-21 09:47:51Z

First of all, the css left property has no effect on elements in normal flow. You should position the element by setting a position property value other than static so that left takes effect.

Secondly, the transition happens from one value to another. So if you expect to see a transition, set a default value, for example left:0.

Finally, If you expect the element to animate when a class it removed, you should not add the transition property in the class being toggled, Instead set it using a static selector.

$("#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>

Refilon · Accepted Answer · 2014-11-21 09:36:19Z

0

You mean like this?

http://jsfiddle.net/99o4k67f/1/

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

Or more like this:

http://jsfiddle.net/99o4k67f/2/

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

Btw, you don't need any css for this :)

answered Nov 21, 2014 at 9:36

Refilon

3,4971 gold badge33 silver badges54 bronze badges

2 Comments

Mamun Sardar Over a year ago

yah, but only collapse to left. not to top left corner

Refilon Over a year ago

Lol @MamunSardar look at second fiddle ;)

Collectives™ on Stack Overflow

Css transition not working with jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related