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

您应该通过为购物车面板设置单独的“可见”类来实现此目的，该类定义了可见时的外观。

在此之后，您可以通过简单地切换“可见”类来对其进行动画处理：

$('#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动画不起作用

1 个答案: