如何使使用背面可见性的图像在变换后不会消失

Question

我已经研究过其他有类似问题的问题，但无法找到他们的解决方案来帮助解决我的问题。

这是小提琴：http://jsfiddle.net/darknessflowers/6k512emb/

问题是，在Chrome和Safari等浏览器中，具有背景的父div(卡(在转换后会阻止图像显示。它在Firefox中运行非常完美。

我试着从父div中移除背景，并将其放在图像上，但如果我这样做，那么变换的动画就不会流畅，所以我又回到了这段代码，这是我最接近于获得所需内容的代码。

相关HTML示例：(在JS中添加了用于frontFace图像的src。隐藏类也被删除。JSFiddle中的完整代码(

const cards = document.querySelectorAll('.card');
let score = 0;
let scoreDisplay = document.querySelector('.score');
let cardsTurnedNum = 0;
let cardsTurned =[];
let lockBoard = false;
var startTime, endTime;
let finalTime = document.querySelector('.finalTime');
let pairs = [
{
id: 1,
frontFace: 'https://picsum.photos/id/1000/400',
found: false,
},
{
id: 2 ,
frontFace: 'https://picsum.photos/id/1001/400',
found: false,
},
{
id: 3 ,
frontFace: 'https://picsum.photos/id/1001/400',
found: false,
},
{
id: 4 ,
frontFace: 'https://picsum.photos/id/1002/400',
found: false,
},
{
id: 5 ,
frontFace: 'https://picsum.photos/id/1003/400',
found: false,
},
{
id: 6 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 7 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 8 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 9 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 10 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 11 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 12 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 13 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 14 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 15 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 16 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 17 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 18 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 19 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
{
id: 20 ,
frontFace: 'https://picsum.photos/400',
found: false,
},
];
let shuffledArray = shuffleArray(pairs); //will mutate original array
function shuffleArray(array) {
for(let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i+1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
// return temp;
}
return array;
}
let firstCard, secondCard;
let hasBeenFlipped = false;
function flipCard(e) {
if (lockBoard) return;
if(!hasBeenFlipped) {
firstCard = this;
hasBeenFlipped = true;
} else {
secondCard = this;
hasBeenFlipped = false;
// return;
}
this.classList.add('flip');
this.lastElementChild.classList.remove('hidden');
this.firstElementChild.classList.add('hidden');
cardsTurned.push(this.lastElementChild.src);
// console.log(cardsTurned);
if(cardsTurned.length === 2) {
console.log('2 turned');
if(firstCard.lastElementChild.src === secondCard.lastElementChild.src) {
increaseScore();
cardsTurned = [];
firstCard.classList.add('permaFlip');
secondCard.classList.add('permaFlip');
} else {
lockBoard = true;
console.log('flipping back');
cardsTurned = [];
setTimeout(function() {
cards.forEach((card) => {
card.classList.remove('flip');
card.firstElementChild.classList.remove('hidden');
card.lastElementChild.classList.add('hidden');
lockBoard = false;
});
},1000);
}
}
}
function addImage() {
//loop through array of cards and attach image from corresponding index of shuffled array
cards.forEach((card,index) => { 
card.lastElementChild.src = shuffledArray[index].frontFace;
});
}
function increaseScore() {
score++;
scoreDisplay.innerHTML = `${score}/10`;
if(score === 10) {
//stopTimer
endTimer();
setTimeout(() => {
winnerBox.classList.add('open');
},300);
}
}
function startTimer() {
startTime = performance.now();
};
function endTimer() {
endTime = performance.now();
let timeDiff = endTime - startTime; //in ms 
// strip the ms 
timeDiff /= 1000; 

// get seconds 
let seconds = Math.round(timeDiff);
finalTime.innerText = `${seconds} seconds`;
console.log(seconds + " seconds");
}
//add all images to random cards on load
addImage();
startTimer();
//add event listener for clicking of cards
cards.forEach(card => card.addEventListener('click', flipCard));

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 15px;
perspective: 1000px;
margin-bottom: 30px;
}
.card {
background: #fbfd8a;
border-radius: 10px;
height: 150px;
padding: 10px;
display: flex;
justify-content: center;
transition: transform 0.5s;
transform-style: preserve-3d;
cursor: pointer;
}
.card .frontFace,
.card .backFace {
backface-visibility: hidden;
}
.card .frontFace,
.card .backFace {
object-fit: cover;
max-width: 100%;
object-position: center;
}
.card.flip, .card.permaFlip {
transform: rotateY(180deg);
}
.frontFace {
transform: rotateY(180deg);
}
.card.flip .frontFace,
.card.permaFlip .frontFace {
display: block;
}
.card.flip .backFace,
.card.permaFlip .backFace {
display: none;
}
.frontFace.hidden {
display: none;
}
.backFace {
transform: translateZ(1px);
}

<div class="grid">
<div class="card">
<img src="https://picsum.photos/id/1025/200/300" alt="Cat - Back of card" class="backFace">
<img src="" alt="" id="1" class="frontFace hidden">
</div>
<div class="card">
<img src="https://picsum.photos/id/1025/200/300" alt="Cat - Back of card" class="backFace">
<img src="" alt="" id="2" class="frontFace hidden">
</div>
</div>

我已经被困在这件事上好几天了，所以我真的很感谢你的帮助！非常感谢。

Answer 1

如果我是你，我会使用不透明度，并将过渡设置为"；步骤结束"；，而不是"；显示：无">

.frontFace, .backFace {
position: absolute;
}
.card.flip .backFace,
.card.permaFlip .backFace {
opacity: 0;
transition: opacity 0.5s step-end;
}
.frontFace.hidden {
opacity: 0;
transition: opacity 0.5s step-end;
}