Javascript 滑入动画不工作

我有一份菜单，我正在做，应该从右边滑进去。HTML如下所示：

<div class="slide-in">
<ul class="menu">
    <li class="item"> Option 1</li>
    <li class="item"> Option 2</li>
</ul>

以及jQuery：

$('.hamburger').click(function(){
    $('.meat').toggleClass('active');
    $('.hamburger').toggleClass('active');
    $('.slide-in').toggleClass('active');
});

问题是

转换：translateX（）.slide-in.active{}

上的code>似乎不起作用。本质上，

.slide-In

框应该从屏幕右侧开始，然后当按下按钮时，它将移动到位。这个盒子目前在我的屏幕右侧300%的位置，无法移动回去

注意：为了兼容性，我试图避免使用

@关键帧

我在CODEPTN上得到的是：
Welp，我只是在动画代码的中间忘记了<代码>和<代码>。< /P>
$('.hamburger').click(function(){
    $('.meat').toggleClass('active');
    $('.hamburger').toggleClass('active');
    $('.slide-in').toggleClass('active');
});