Jquery 转换动画不工作

Question

我想要一个div点击按钮时从右边滑入，点击关闭按钮时应该向后滑动隐藏。我想使用 animation() 方法，但它似乎不起作用。

这是我目前得到的：

$('.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);            
 });

有什么我遗漏的吗？当我点击 cart-btn 时完全没有任何反应。

Answer 1

您应该为您的购物车面板设置一个单独的 "visible" class 来做到这一点，它定义了它在可见时的外观。

在此之后，您可以通过简单地切换 "visible" class:

来设置动画 in/out

$('#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 转换动画不工作

Jquery animation of transform not working

javascript

jquery

jquery-animate