Javascript jQuery切换和动画行为问题

我正在开发一个个人资料卡用户界面。我对jQuery类切换行为有问题。
这是我的HTML：

$（文档）.ready（函数（）{
$（'.CTA'）。单击（函数（）{
$（'.SocialCard'）.toggleClass（'Transforming-Forward'）；
setTimeout（函数（）{
$（'.SocialCard'）.toggleClass（'Transformed'）；
$（'.SocialConsWrapper'）.toggleClass（'SocialCons-Block'）；
$（'.CloseBtn'）.toggleClass（'Block'）；
}, 320);
});
$（'.CloseBtn'）。单击（函数（）{
$（'.SocialCard'）.toggleClass（'Transforming-Forward'）；
$（'.SocialCard'）.toggleClass（'Transforming-Reverse'）；
setTimeout（函数（）{
$（'.SocialCard'）.toggleClass（'Transformed'）；
$（'.SocialConsWrapper'）.toggleClass（'SocialCons-Block'）；
$（'.CloseBtn'）.toggleClass（'Block'）；
}, 320);
});
});
.Wrapper{
宽度：360px；
高度：640px；
背景：线性梯度（rgba（250，250，250，0.0），rgba（47，27，86，0.6））；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
最大宽度：100%；
最大高度：100%；
边界半径：5px；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
溢出：隐藏；
}
.信息卡{
宽度：90%；
高度：150像素；
背景色：#FFFFFF；
边界半径：5px；
保证金权利：5%；
左缘：5%；
位置：绝对位置；
最高：70%；
z指数：0；
}
.名称标题，
.社会标题{
字体大小：32px；
字体大小：正常；
文本对齐：居中；
填充物：5px；
}
.职业{
字体样式：22px；
字体重量：较轻；
文本对齐：居中；
填充物：5px；
}
.地址{
字体大小：22px；
字体重量：较轻；
文本对齐：居中；
填充物：5px；
}
.地址一{
颜色：#E52E67；
}
.CTA，
.关闭{
宽度：60px；
高度：60px；
背景色：#E52E67；
边界：无；
边界半径：100%；
位置：绝对位置；
最高：88%；
右：10%；
大纲：无；
光标：指针；
z指数：2；
字体大小：22px；
颜色：#FFFFFF；
}
.CTA i，
.CloseBtn i{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.关闭{
显示：无；
z指数：-1；
}
.街区{
显示：块；
z指数：3；
}
社会信用卡{
宽度：60px；
高度：60px；
背景色：#DDDDDD；
边界半径：100%；
位置：绝对位置；
最高：88%；
右：10%；
z指数：2；
}
.转变{
宽度：360px；
高度：640px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
最大宽度：100%；
最大高度：100%；
边界半径：5px；
z指数：3；
}
.向前转变{
-webkit动画：TransformationForward 0.5s易用性；
-o-animation:TransforminationForward 0.5s易用性；
动画：TransformationForward 0.5s易用性；
}
.变换反向{
-webkit动画：转换反向0.5s易用性；
-o-动画：转换反向0.5s缓进；
动画：变换反向0.5s缓进；
}
@关键帧向前变换{
25% {
宽度：100px；
高度：100px；
}
50% {
宽度：200px；
高度：200px；
}
75% {
宽度：320px；
高度：320px；
最高：25%；
}
100% {
宽度：360px；
高度：640px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
最大宽度：100%；
最大高度：100%；
边界半径：5px；
}
}
@关键帧变换反转{
25% {
宽度：360px；
高度：640px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
最大宽度：100%；
最大高度：100%；
边界半径：5px；
}
50% {
宽度：320px；
高度：320px；
最高：25%；
}
75% {
宽度：200px；
高度：200px；
}
100% {
宽度：100px；
高度：100px；
}
}
社会党大厦{
显示：块！重要；
}
.社会主义者{
宽度：100%；
显示：无；
文本对齐：居中；
位置：绝对位置；
最高：30%；
}
社会党{
列表样式类型：无；
}
李先生{
显示：内联块；
利润率：10px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：40px；
}
社会党{
宽度：40px；
高度：40px；
背景色：#E52E67；
字体大小：24px；
颜色：#FFFFFF；
}

扎里亚布·瓦西姆
前端开发人员

巴基斯坦卡拉奇

跟着我







您使用了
切换类而不是显式指定所需的状态，从而搞乱了CSS类的状态。此外，经过一些重构后，您的代码可能看起来更简单：


$（文档）.ready（函数（）{
显示的功能卡（状态）{
$（'.SocialCard'）.toggleClass（'Transformed'，state）；
$（'.SocialConsWrapper'）.toggleClass（'SocialCons-Block'，状态）；
$（'.CloseBtn'）.toggleClass（'Block'，state）；
}
函数runAnimation（前进）{
var animation=forward？'Transforming forward'：'Transforming Reverse'；
$（'.SocialCard'）.addClass（动画）；
setTimeout（函数（）{
$（'.SocialCard'）.removeClass（动画）；
显示卡片（前进）；
}, 320);
}
$（'.CTA'）。单击（函数（）{
运行动画（真）；
});
$（'.CloseBtn'）。单击（函数（）{
运行动画（假）；
});
});
.Wrapper{
宽度：360px；
高度：640px；
背景：线性梯度（rgba（250，250，250，0.0），rgba（47，27，86，0.6））；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
最大宽度：100%；
最大高度：100%；
边界半径：5px；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
溢出：隐藏；
}
.信息卡{
宽度：90%