Javascript-日历翻转动画不工作

我正在尝试创建一个日历，在单击某个特定日期时，日历应翻转以显示特定预订的详细信息。虽然日历界面完美地出现在网页上，但翻转动画不起作用，我似乎不明白为什么。我必须补充一点，我在codepen上找到了大部分代码，并根据我的喜好对其进行了修改。我在下面附上了我的代码明细。我将非常感谢任何建议和帮助。谢谢

变量应用={
设置：{
容器：$（“.calendar”），
日历：$（“.front”），
天数：$（“.weeks span”），
表格：$（“.back”），
输入：$（“.back输入”），
按钮：$（“.back按钮”）
},
init：函数（）{
实例=此；
设置=此参数设置；
这个.bindUIActions（）；
},
交换：功能（当前端、所需端）{
settings.container.toggleClass（“翻转”）；
电流侧衰减（900）；
currentSide.hide（）；
desiredSide.show（）；
},
bindUIActions:函数（）{
设置.days.on（“单击”，函数）（）{
swap（settings.calendar、settings.form）；
settings.input.focus（）；
});
设置。按钮。打开（“单击”，功能（）{
交换（settings.form、settings.calendar）；
});
}
};
app.init（）；

* {
框大小：边框框；
字体系列：“Roboto”，无衬线；
列表样式：无；
保证金：0；
大纲：无；
填充：0；
}
a{
文字装饰：无；
}
身体，
html{
身高：100%；
}
身体{
背景:#底纹;；
字体系列：“Roboto”，无衬线；
}
.集装箱{
对齐项目：居中；
显示器：flex；
身高：100%；
证明内容：中心；
保证金：0自动；
最大宽度：600px；
宽度：100%；
}
.日历{
背景：#2b4450；
边界半径：4px；
盒影：0 5px20px rgba（0,0,0,0.3）；
高度：501px；
前景：1 000；
过渡：0.9s；
变换样式：保留-3d；
宽度：100%；
}
/*前日历*/
.前线{
变换：旋转（0度）；
}
.当前日期{
边框底部：1px实心rgba（73114133,0.6）；
显示器：flex；
证明内容：之间的空间；
填充：30px 40px；
}
.当前日期h1{
颜色：#底色；
字号：1.4em；
字体大小：300；
}
.星期天{
颜色：#底色；
显示器：flex；
证明内容：之间的空间；
字号：600；
填充：30px 40px；
}
.天{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.周{
颜色：#fff；
显示器：flex；
弯曲方向：立柱；
填充：0 40px；
}
.weeks分区{
显示器：flex；
字体大小：1.2米；
字体大小：300；
证明内容：之间的空间；
边缘底部：20px；
宽度：100%；
}
.上个月{
不透明度：0.3；
}
.周跨度{
填充：10px；
}
.周跨度.活动{
背景:#f78536；
边界半径：50%；
}
.周跨度：非（.上个月）：悬停{
光标：指针；
字号：600；
}
.事件{
位置：相对位置；
}
.活动：之后{
内容：“•”；
颜色：#f78536；
字号：1.4em；
位置：绝对位置；
右：-4px；
顶部：-4px；
}
/*后台事件表单*/
.回来{
身高：100%；
变换：旋转（180度）；
}
.反向输入{
背景：无；
边界：无；
边框底部：1px实心rgba（73114133,0.6）；
颜色：#底色；
字号：1.4em；
字体大小：300；
填充：30px 40px；
宽度：100%；
}
.info{
颜色：#底色；
显示器：flex；
弯曲方向：立柱；
字号：600；
字体大小：1.2米；
填充：30px 40px；
}
.info div:不是（.observations）{
边缘底部：40px；
}
.info span{
字体大小：300；
}
.信息.日期{
显示器：flex；
证明内容：之间的空间；
}
.info.datep{
宽度：50%；
}
.信息.地址{
宽度：100%；
}
.行动{
底部：0；
边框顶部：1px实心rgba（73114133,0.6）；
显示器：flex；
证明内容：之间的空间；
位置：绝对位置；
宽度：100%；
}
.操作按钮{
背景：无；
边界：0；
颜色：#fff；
字号：600；
字母间距：3px；
保证金：0；
填充：30px0；
文本转换：大写；
宽度：50%；
}
.操作按钮：类型的第一个{
右边框：1px实心rgba（73114133,0.6）；
}
.操作按钮：悬停{
背景#497285；
光标：指针；
}
.操作按钮：活动{
背景#5889a0；
大纲：无；
}
/*翻转动画*/
.翻转{
变换：旋转（180度）；
}
.前线，
.回来{
背面可见性：隐藏；
}

26日星期一
2021年4月

周一
星期二
结婚
周四
星期五
坐
太阳

28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

日期：2016年1月15日


时间：下午6:35


地址：纽约州纽约市西81街129号


观察：提前15分钟到达

拯救
解雇

只需更改

标记，如下所示。我为jQuery添加了GoogleCDN
有关如何加载脚本标记的详细信息

var-app={
设置：{
货柜：$（”