javascript - 变换的 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”类来将其动画化:

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