Javascript 如何使动画与打开一样关闭

单击（？）时，打开具有动画效果的选项。动画效果很好。希望关闭与打开动画相同的选项，即选项气泡效果，但关闭动画效果与打开动画不同。需要关闭的动画也与气泡效果相同

谁能帮我找出我所犯的错误吗。谢谢

jQuery（文档）.ready（函数（）{
var$body=jQuery（'body'）；
var$cs_fixed_wrapper=jQuery（'.cs_fixed_wrapper'）；
//客户服务图标单击-例如，（？）单击
jQuery（'img.cs\u触发器\u图标'）。打开（'click'，函数（ev）{
ev.stopPropagation（）；
if（jQuery（'.cs_options'）.hasClass（'slide_open'））{
jQuery（'.cs_options'）.removeClass（'slide_open'）.addClass（'slide_close'）；
}
否则{
jQuery（'.cs_options'）.removeClass（'slide_close'）.addClass（'slide_open'）；
}
});
var clickEvent={}；
//cs选项-触发功能
$body.on（'click'，'cs_action_trigger'，函数（ev）{
ev.stopPropagation（）；
var window_width=jQuery（window）.width（）；
var data_type=jQuery（this）.data（'type'）；
如果（窗宽<800）{
如果（！clickEvent[数据类型]）{
clickEvent={}；
单击事件[数据类型]=1；
如果（数据类型=='联系'）{
jQuery（'.cs_contact'）.addClass（'cs_contact_opened'）；
}
else if（数据类型==“supportarticle”）{
jQuery（'.cs_supportarticle'）.addClass（“cs_supportarticle_opened”）；
返回false；
}
else if（数据类型=='cs_faq'）{
jQuery（'.cs_faq'）.addClass（“cs_faq_已打开”）；
}
}else if（单击事件[数据类型]）{
clickEvent={}；
单击事件[数据类型]=1；
如果（数据类型=='联系'）{
jQuery（'.cs_contact_modal'）.addClass（'opened'）；
$body.addClass（'cs_popup_opened'）；
jQuery（'.close'）.fadeOut（'200'）；
clickEvent={}；
}
else if（数据类型=='tutorial'）{
jQuery（'.cs_tutorial_modal'）.addClass（'opened'）；
$body.addClass（'cs_popup_opened'）；
jQuery（'.close'）.fadeOut（'200'）；
clickEvent={}；
}
else if（数据类型==“supportarticle”）{
clickEvent={}；
}
else if（数据类型=='cs\U faq'）{
jQuery（'.cs_faq_modal'）.addClass（'opened'）；
$body.addClass（'cs_popup_opened'）；
jQuery（'.close'）.fadeOut（'200'）；
clickEvent={}；
}
}
}否则{
如果（数据类型=='联系'）{
jQuery（'.cs_contact_modal'）.addClass（'opened'）；
$body.addClass（'cs_popup_opened'）；
jQuery（'.cs_contact_modal.close_btn'）.fadeIn（）；
}
else if（数据类型==“supportarticle”）{
//console.log（数据类型）；
}
else if（数据类型=='cs\U faq'）{
jQuery（'.cs_faq_modal'）.addClass（'opened'）；
$body.addClass（'cs_popup_opened'）；
jQuery（'.cs_faq_modal.close_btn'）.fadeIn（）；
}
}
});
//客户服务-联系人表单弹出窗口外部关闭桌面
jQuery（'.cs\u contact\u modal'）。打开（'click'，函数（ev）{
jQuery（this.removeClass（'opened'）；
$body.removeClass（'cs_popup_opened'）；
//在多个弹出窗口上显示关闭图标
显示关闭图标（）；
//基于条件的正文滚动
用于自定义页面的正文滚动页面（）；
联系表格cf7_empty（）；
});
jQuery（'.cs\u contact\u modal.modal\u profile\u wrapper'）。打开（'click'，函数（ev）{
ev.stopPropagation（）；
});
//客户服务-桌面联系人窗体弹出关闭
jQuery（'.cs\u contact\u model\u close'）。打开（'click'，函数（ev）{
jQuery（'.cs_contact_modal'）.removeClass（'opened'）；
$body.removeClass（'cs_popup_opened'）；
//在多个弹出窗口上显示关闭图标
显示关闭图标（）；
//基于条件的正文滚动
用于自定义页面的正文滚动页面（）；
jQuery（'.cs_contact'）.removeClass（'cs_contact_opened'）；
联系表格cf7_empty（）；
});
//外部单击以关闭客户服务幻灯片选项
jQuery（'body'）。在（'click'，function（）上{
jQuery（'.cs_options'）.removeClass（'slide_open'）.addClass（'slide_close'）；
});
});
*{
保证金：0；
填充：0px；
框大小：边框框；
}
身体{
背景色：#f7f7f7；
}
.cs_固定_包装{
位置：固定；
底部：20px；
右：20px；
z指数：9999999；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
过渡：均为0.3秒；
能见度：可见；
不透明度：1；
}
.cs_内包装{
位置：相对位置；
显示器：flex；
柔性流动：柱反向流动；
对齐项目：柔性端；
}
.cs\u动作\u触发器.cs\u触点\u打开{
宽度：144px；
过渡：宽度0.5s；
}
.滑动\打开。cs\操作\触发。cs\触点\打开{
过渡：均为0.5s；
}
.滑动\打开。cs\操作\触发。cs\触点\关闭{
过渡：均为0.5s；
}
.cs_支持文章{
边缘底部：0px；
边界半径：30px；
}
.cs\u操作\u触发器.cs\u支持文件\u打开{
宽度：188px；
过渡：宽度0.5s；
}
.滑动\打开。cs \操作\触发。cs \支持部件\打开，
.滑动\u打开。cs\u操作\u触发器。cs\u支架\u关闭{
过渡：均为0.5s；
}
.cs_常见问题解答{
边际上限：0px；
}
.slide\u open.cs\u action\u trigger.cs\u faq\u open{
宽度：102px；
过渡：宽度0.5s；
}
.slide\u open.cs\u action\u trigger.cs\u faq\u opened，
.滑动\打开。cs\启动
@keyframes unbubble{
    0%  {transform: scale(1,1)      translateY(-10px); }
    30%  { transform: scale(1.1,1.1)      translateY(-15px); }
    50%  { transform: scale(1.05,1.05) translateY(-15px); }
    57%  { transform: scale(1,1)   translateY(-10px); }
    64%  { transform: scale(0.5,0.5)      translateY(0); }
    100% { transform: scale(0,0)      translateY(0); }
}

.slide_close .cs_action_trigger {
    animation: unbubble .7s 0.5;
}