Javascript 转换的Jquery动画不工作

我想让一个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);            
 });

---

有什么我错过的吗？当我单击购物车btn时，绝对不会发生任何事情。

您应该为购物车面板创建一个单独的“可见”类，该类定义了它在可见时的外观

在此之后，只需切换“visible”类，即可设置其输入/输出动画：

$（“#按钮”）。在（'click'，function（）上{
$（'.cart面板'）.toggleClass（'visible'）；
});
.container{
宽度：300px；
高度：300px；
背景：灰色；
}
.购物车面板{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
右图：-100%；
过渡：所有0.5s缓解；
}
.cart-panel.visible{
右：0；
}

切换
提供jsfiddle或至少是
html
部分。为什么不使用toggleClass（）方法呢？转换是非常复杂的css规则，jquery无法解析。请看下面的答案：