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

Вы должны сделать это, имея отдельный «видимый» класс для вашей панели тележки, который определяет, как он будет выглядеть, когда он будет виден.

После этого, вы можете оживить его в/из просто переключая "видимый" класс:

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