Jquery animation of transform not working

Question

I want to a div to slide in from the right when clicking a button, and when clicking a close button, it should slide back and be hidden. I want to use the animation()-method but it doesn't seem to work.

here is what I got so far:

$('.cart-panel').css({
   'display': 'none',
   'transform' : 'translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0)'            
});

$('.cart-btn').on('click', function(){
    $('.cart-panel').stop().animate({
        "display": 'block',
        "transform" : 'matrix(1, 0, 0, 1, 0, 0);'
     }, 300);            
 });

is there anything I missed? when I click the cart-btn absolutely nothing happens.

The transform is quite complex css rule that cannot be resolved by jquery. See the answer here: http://stackoverflow.com/questions/5462275/animate-element-transform-rotate — adosan, Feb 17 '17 at 14:22

Juuso · Accepted Answer · 2017-02-17T14:28:21.603

You should do this by having a separate "visible" class for your cart panel, which defines what it should look like when it is visible.

After this, you can animate it in/out by simply toggling the "visible" class:

$('#button').on('click', function() {
    $('.cart-panel').toggleClass('visible');
});

.container {
   width: 300px;
   height: 300px;
   background: gray;
}

.cart-panel {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  right: -100%;
  transition: all 0.5s ease;
}

.cart-panel.visible {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="button">Toggle</button>
  <div class="cart-panel">
  </div>
</div>

Jquery animation of transform not working

1 Answers1