Javascript 第二次单击按钮时切换反向动画

我正在寻找一个菜单动画。菜单按钮是一个div，它有一个动画以及一个点击事件。我成功地让菜单漂亮地出现在屏幕上，但我无法让它也离开它，最好是使用相同但相反的动画。这是我的html：

<div class="dropdown-meniu">
    <div class="buton-meniu" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div id="myDropdown" class="dropdown-meniu-content">
        <p>TEST</p>
    </div>
</div>

如果有必要，我会发布其他CSS。对于脚本，我在两个动画中使用了jQuery和javascript（我是javascript/jQuery的noob，所以我无法让它单独使用javascript/jQuery，我知道jQuery加载速度很慢，但我在其他方面使用它）

提前谢谢你

编辑：

---

这是JSFIDLE:

不太确定你需要什么，但可能是这样的？我拿出了

显示屏：none

，并稍微简化了动画

HTML

jQuery

$('.bar1').click(function(){
 $('.dropdown-meniu-content').toggleClass('show').toggleClass('hide');
})

---

不太确定您需要什么，但可能是这样的？我拿出了

显示屏：none

，并稍微简化了动画

HTML

jQuery

$('.bar1').click(function(){
 $('.dropdown-meniu-content').toggleClass('show').toggleClass('hide');
})

---

您的问题是，您试图在

display:none

和

display:block

之间设置动画，但这不起作用。您需要以其他方式隐藏元素，如负偏移，然后将其设置为可见的动画

修改您的

.dropdown meniu content

规则，以从屏幕外开始并具有

转换

属性。然后让

.show

将

转换重置回
translateX（0%）
：


函数myFunction（x）{
x、 切换（“更改”）；
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
html，
身体{
边际：0px；
填充：0px；
最大宽度：100%；
}
.包装纸{
高度：110px；
宽度：100%；
最大宽度：10000px；
背景色：rgb（206、206、206、0.2）；
}
.标志{
浮动：左；
边缘顶部：10px；
左边距：5px；
宽度：200px；
高度：100px；
}
梅尼乌先生{
浮动：对；
宽度：自动；
}
布顿·梅尼奥先生{
显示：块；
光标：指针；
宽度：35px；
右边距：30px；
边缘顶端：40px；
}
.bar1，
.bar2，
.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.找零{
不透明度：0；
}
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
.下拉菜单{
位置：相对位置；
显示：内联块；
}
.下拉菜单中的内容{
顶部：110px；
位置：固定；
背景色：#6969；
宽度：30%；
最大宽度：10000px；
身高：100%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
溢出：隐藏；
右：0；
转化：translateX（100%）；
转型：转型1秒轻松；
动画名称：SlideinMeniu；
-webkit动画持续时间：0.6s；
-webkit动画名称：slideIn meniu；
动画持续时间：0.75秒；
}
@关键帧幻灯片{
从{
转化：translateX（100%）；
不透明度：0.5；
}
到{
右边距：0px；
不透明度：1；
}
}
.表演{
转化：translateX（0%）；
}

试验

您的问题是，您试图在
显示：无
和
显示：块
之间设置动画，但这不起作用。您需要以其他方式隐藏元素，如负偏移，然后将其设置为可见的动画

修改您的
.dropdown meniu content
规则，以从屏幕外开始并具有
转换
属性。然后让
.show
将
转换重置回
translateX（0%）
：


函数myFunction（x）{
x、 切换（“更改”）；
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
html，
身体{
边际：0px；
填充：0px；
最大宽度：100%；
}
.包装纸{
高度：110px；
宽度：100%；
最大宽度：10000px；
背景色：rgb（206、206、206、0.2）；
}
.标志{
浮动：左；
边缘顶部：10px；
左边距：5px；
宽度：200px；
高度：100px；
}
梅尼乌先生{
浮动：对；
宽度：自动；
}
布顿·梅尼奥先生{
显示：块；
光标：指针；
宽度：35px；
右边距：30px；
边缘顶端：40px；
}
.bar1，
.bar2，
.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.找零{
不透明度：0；
}
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
.下拉菜单{
位置：相对位置；
显示：内联块；
}
.下拉菜单中的内容{
顶部：110px；
位置：固定；
背景色：#6969；
宽度：30%；
最大宽度：10000px；
身高：100%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
溢出：隐藏；
右：0；
转化：translateX（100%）；
转型：转型1秒轻松；
动画名称：SlideinMeniu；
-webkit动画持续时间：0.6s；
-webkit动画名称：slideIn meniu；
动画持续时间：0.75秒；
}
@关键帧幻灯片{
从{
转化：translateX（100%）；
不透明度：0.5；
}
到{
右边距：0px；
不透明度：1；
}
}
.表演{
转化：translateX（0%）；
}

试验

    .dropdown-meniu-content {
   /*      display: none; */
        position: fixed;
        background-color: #696969;
        width: 35%;
        max-width: 500px;
        height: 100%;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        overflow: hidden;
        right: 0;

    }
    @keyframes slideIn-meniu {
        from { opacity: 0.5;  }
        to { opacity: 1; } 
    }
    @keyframes slideOut-meniu {
        from { opacity: 1;  }
        to { opacity: 0.5; } 
    }
    .show {
        display:block;
        right: 0;
        transition: right 0.6s;

        -webkit-animation-duration: 0.6s;
        -webkit-animation-name: slideIn-meniu;
        animation-duration: 0.6s ease;
    }
    .hide {
      right: -35%;
      transition: right 0.6s ease;
      display: block;
       -webkit-animation-duration: 0.6s;
       -webkit-animation-name: slideOut-meniu;
        animation-duration: 0.6s ease;
    }

$('.bar1').click(function(){
 $('.dropdown-meniu-content').toggleClass('show').toggleClass('hide');
})