Javascript日历点击日期触发flip翻转动画失效问题求助

核心故障原因 #

• 3D翻转的定位逻辑缺失：front、back两个面未做绝对定位，处于常规文档流上下排布，即使触发旋转也无法正确展示背面内容
• swap函数逻辑冲突：触发翻转后立刻执行hide操作隐藏当前面，翻转动画还未执行完成就丢失了动画载体，看不到翻转效果
• CSS属性不规范：perspective属性未加单位，部分浏览器无法识别，导致3D空间不生效
• 部分场景存在jQuery引入失败问题，导致点击事件未绑定成功

具体修复步骤 #

1. 修正CSS代码 #

找到对应选择器修改如下：

.calendar {
  position: relative; /* 新增，为子元素绝对定位提供参照 */
  background: #2b4450;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  height: 501px;
  perspective: 1000px; /* 补全px单位 */
  transition: 0.9s;
  transform-style: preserve-3d;
  width: 100%;
}

.front, .back {
  position: absolute; /* 新增，让两个面重叠在同一位置 */
  top: 0;
  left: 0;
  width: 100%; /* 新增，撑满父容器 */
  height: 100%; /* 新增，撑满父容器 */
  backface-visibility: hidden;
}

2. 修正JS逻辑 #

首先简化多余的显隐控制代码，backface-visibility已经会自动隐藏旋转到背面的面，不需要手动控制显隐：

swap: function (currentSide, desiredSide) {
  settings.container.toggleClass("flip");
  // 删掉原有的currentSide.fadeOut、hide、desiredSide.show三行代码
  if(settings.container.hasClass("flip")) {
    setTimeout(() => {settings.input.focus()}, 900) // 等翻转完成再聚焦输入框，避免布局抖动
  }
},

同时修正init函数的变量作用域问题，避免全局污染：

init: function () {
  const instance = this; // 补全变量声明
  const settings = this.settings; // 补全变量声明
  this.bindUIActions();
},

3. 验证jQuery引入 #

如果点击日期完全无反应，打开浏览器控制台查看是否有$ is not defined报错，如果存在该报错，要么修正本地jQuery文件的引入路径，要么替换为官方CDN地址：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

效果验证 #

修改完成后点击非上月标记的日期，即可看到正常的Y轴翻转动画，点击背面的保存/取消按钮可以翻转回日历界面。

内容的提问来源于stack exchange，提问作者user3366987