Как сделать так, чтобы изображение, использующее обратную видимость, не исчезало после преобразования? - PullRequest
Новая
       52

Как сделать так, чтобы изображение, использующее обратную видимость, не исчезало после преобразования?

1 голос
/ 03 августа 2020

Я рассмотрел здесь другие вопросы с аналогичными проблемами, но не смог найти их решения, которые помогут исправить мои.

Вот скрипка: http://jsfiddle.net/darknessflowers/6k512emb/

Проблема в том, что родительский div (карточка), имеющий фон, останавливает отображение изображения после преобразования в таких браузерах, как Chrome и Safari. Он отлично работает в Firefox.

Я попытался удалить фон из родительского div и вместо этого поместить его на изображения, но если я это сделаю, преобразование не будет анимироваться плавно, поэтому я вернулся к этот код, который я ближе всего подошел к получению того, что я хочу.

Соответствующий HTML образец: (sr c для изображений FrontFace добавляется в JS. Скрытый класс также удаляется. Полный код в 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>

Я застрял на этом несколько дней, поэтому был бы очень признателен за помощь, чтобы заставить это работать! Спасибо.

1 Ответ

0 голосов
/ 03 августа 2020

На вашем месте я бы использовал непрозрачность с переходом, установленным на «step-end», вместо «display: none;» 

.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;
}
...