jquery转换不起作用的动画

我想要一个div从右侧滑入，点击一个按钮，当点击一个关闭按钮时，它应该向后滑动并隐藏起来。我想使用animation()-方法，但它似乎不起作用。jquery转换不起作用的动画

这里是我走到这一步：

$('.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绝对没有任何反应。

来源

2017-02-17 Steve

提供的jsfiddle或至少'html'部分。 –

为什么不使用toggleClass（）方法？ –

这个转换是相当复杂的css规则，无法通过jquery解决。在这里看到答案：http://stackoverflow.com/questions/5462275/animate-element-transform-rotate – adosan

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

在此之后，你可以在输入/输出，只需拨动 “看得见” 的一流制作动画：

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

来源

2017-02-17 14:19:16 Juuso

jquery转换不起作用的动画

回答

相关问题