CODEWITHSUNDEEP
jqueryhtmlcss
Mamun Sardar
Mamun Sardar

Reputation: 2729

Css transition not working with jquery

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>

Upvotes: 0

Views: 2441

Answers (2)

T J
T J

Reputation: 43156

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>

Upvotes: 2

Refilon
Refilon

Reputation: 3489

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 :)

Upvotes: 0

Related Questions