修复 Firefox 中翻转卡片按钮的可见性问题
This commit is contained in:
1 parent
82312721a0
commit
feca67635c
2 files changed
+21
-2
No files matched your search
@@ -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
@@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user