修复 Firefox 中翻转卡片按钮的可见性问题

This commit is contained in:
shuaiplus committed 2025-06-06 04:57:57 +08:00
1 parent 82312721a0
commit feca67635c
2 files changed
+21 -2

No files matched your search

+13
View File
@@ -63,6 +63,19 @@ body {
z-index: 10;
}
/* Firefox兼容性修复:控制翻转时按钮的可见性 */
.flip-card-inner.flipped .flip-card-front .help-btn {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.flip-card-inner:not(.flipped) .flip-card-back .help-btn {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.help-btn:hover {
background: #30a8f7;
border-color: #30a8f7;
+8 -2
View File
@@ -598,13 +598,19 @@ export function initFlipCard() {
// 当前旋转角度 / Current rotation angle
let currentRotation = 0;
// 执行翻转操作 / Execute flip operation
// 执行翻转操作 / Execute flip operation
function performFlip() {
currentRotation += 180;
const flipCardInner = flipCard.querySelector('.flip-card-inner');
if (flipCardInner) {
flipCardInner.style.transform = `rotateX(${currentRotation}deg)`;
// 添加或移除flipped类来控制按钮可见性(Firefox兼容性修复)
if (currentRotation % 360 === 180 || currentRotation % 360 === -180) {
flipCardInner.classList.add('flipped');
} else {
flipCardInner.classList.remove('flipped');
}
}
}