Jquery 如何在第二次单击时反转css动画

我创建了一个动画，可以绘制并设置三条线的动画

顶部，从右到左

左，从上到下

底部，从左到右 内容包装器是

display:none

，当单击

#btn

时，内容包装器将显示，线条将动画化。我希望在第二次点击时动画会反转，内容包装器应该返回到

display:none

我尝试了下面的代码，但没有成功。谁能给我一些建议怎么办

$（'#btn'）。单击（函数（）{
var clicks=$（this.data（'clicks'）；
如果（单击）{
$（'.content wrapper'）.css({
“显示”：“无”
});
}否则{
$（'.content wrapper'）.css({
“显示”：“块”
});
}
$（this）.data（“单击”，！单击）；
});
.content包装器{
显示：无；
宽度：68.5%；
身高：60%；
位置：绝对位置；
最高：25%；
左：50%；
转换：翻译（-50%）；
}
.l-top，
.左，
.l-bottom{
位置：绝对位置；
背景：透明；
-webkit动画持续时间：.4s；
-webkit动画迭代计数：1；
-webkit动画计时功能：轻松输入输出；
-webkit动画填充模式：两者都有；
-webkit动画方向：交替；
}
.l-top{
排名：0；
右：0；
高度：1px；
-webkit动画名称：l-top；
-webkit动画延迟：0秒；
}
.左{
排名：0；
左：0；
宽度：1px；
-webkit动画名称：l-左；
-webkit动画延迟：.4s；
}
.l-bottom{
左：0；
底部：0；
高度：1px；
-webkit动画名称：l-bottom；
-webkit动画延迟：.8s；
}
@-webkit关键帧l-top{
0% {
宽度：0；
背景：红色；
}
100% {
宽度：100%；
背景：红色；
}
}
@-webkit左关键帧{
0% {
身高：0；
背景：红色；
}
100% {
身高：100%；
背景：红色；
}
}
@-webkit关键帧l-bottom{
0% {
宽度：0；
背景：红色；
}
100% {
宽度：100%；
背景：红色；
}
}

btn
内容

用转场代替动画怎么样？我必须动画内容包装的宽度本身，所以它不是真正隐藏的，只是0宽度，但实际上是一样的


$（'#btn'）。单击（函数（）{
$（'.content wrapper'）.toggleClass（'open'）；
});
.content包装器{
显示：块；
宽度：0；
身高：60%；
位置：绝对位置；
最高：25%；
左：50%；
转换：翻译（-50%）；
背景：透明；
溢出：隐藏；
过渡段：宽度为1s1.2s；
}
.content-wrapper.open{
宽度：68.5%；
过渡：宽度为0.1s；
}
.l-top，
.左，
.l-bottom{
位置：绝对位置；
背景：红色；
}
.content wrapper.l-top{
排名：0；
右：0；
宽度：0；
高度：1px；
过渡：宽度.4s.8s；
}
.content-wrapper.open.l-top{
宽度：100%；
过渡：宽度4s；
}
.内容包装器.左{
排名：0；
左：0；
宽度：1px；
身高：0；
过渡：高度.4s.4s；
}
.content-wrapper.open.l-left{
身高：100%；
过渡：高度.4s.4s；
}
.content wrapper.l-bottom{
宽度：0；
左：0；
底部：0；
高度：1px；
过渡：宽度4s；
}
.content-wrapper.open.l-bottom{
宽度：100%；
过渡：宽度.4s.8s；
}

btn
内容

尝试切换一个反向类，class1是
内容包装中的
下一个类
内容包装外的
（反向类）设置它，然后使用
setInterval
在ex.
1000
ms（在设置第二个类后）将显示设置为无