У меня проблема в коде, может кто знает решение.

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

Начальное состояние большей карты - display: none; и opacity: 0; Я знаю, что мы не можем затемнить элемент display none, но моя идея заключалась в том, чтобы установить сначала display: block, а затем opacity: 1 со свойством перехода в css в элементах "card-open".

Но переход не работает, и это сводит меня с ума, потому что я не знаю почему.

Я делюсь ссылкой на код здесь: https://codepen.io/arnaudhrt/pen/VwWBLze

И код javascript:

const Card = document.querySelectorAll('.card')
const CardOpen = document.querySelectorAll('.card-open')
const btnClose = document.querySelectorAll('.close')


for(let i = 0 ; i < Card.length ; i++) {
  Card[i].addEventListener('click', function() {
    CardOpen[i].style.display = 'block'
    CardOpen[i].style.opacity = '1'
  });
  btnClose[i].addEventListener('click', () => {
    CardOpen[i].style.opacity = '0'
    CardOpen[i].style.display = 'none'
  })
}

PS: я не могу установить блок отображения и просто переключить непрозрачность, потому что, если я это сделаю, я не смогу использовать другие карты с z-index.

0
Arnaud Hrt 22 Сен 2021 в 16:13

2 ответа

Лучший ответ

Вы можете использовать видимость вместо отображения, отображение не имеет эффектов перехода в css.

const Card = document.querySelectorAll('.card')
const CardOpen = document.querySelectorAll('.card-open')
const btnClose = document.querySelectorAll('.close')


for(let i = 0 ; i < Card.length ; i++) {
  Card[i].addEventListener('click', function() {
    CardOpen[i].style.visibility = 'visible'
    CardOpen[i].style.opacity = '1'
  });
  btnClose[i].addEventListener('click', () => {
    CardOpen[i].style.opacity = '0'
    CardOpen[i].style.visibility = 'hidden'
  })
}
body {
  background: #565279;
    width: 100vw;
    height: 100vh;
    display: flex;
}
.container-card {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    position: relative;
    transition: all 0.4s ease-in-out;
}
.card {
    width: 200px;
    height: 200px;
    background: crimson;
    margin: 20px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}
.card-open {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
.card-open span {
    color: #fff;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform:translateX(-50%);
    cursor: pointer;
}
<div class="container-card">
      <div class="card card1"></div>
      <div class="card card2"></div>
      <div class="card card3"></div>
      <div class="card card4"></div>
      <div class="card card5"></div>
      <div class="card card6"></div>
      <div class="card card7"></div>
      <div class="card card8"></div>
      <div class="card card9"></div>
      <div class="card card10"></div>
      <div class="card-open open1"><span class="close">close</span></div>
      <div class="card-open open2"><span class="close">close</span></div>
      <div class="card-open open3"><span class="close">close</span></div>
      <div class="card-open open4"><span class="close">close</span></div>
      <div class="card-open open5"><span class="close">close</span></div>
      <div class="card-open open6"><span class="close">close</span></div>
      <div class="card-open open7"><span class="close">close</span></div>
      <div class="card-open open8"><span class="close">close</span></div>
      <div class="card-open open9"><span class="close">close</span></div>
      <div class="card-open open10"><span class="close">close</span></div>
    </div>
0
naxsi 22 Сен 2021 в 13:17
Here are the little changes and additions you should make. This would work.
for(let i = 0 ; i < Card.length ; i++) {
  Card[i].addEventListener('click', function() {
    CardOpen[i].style.height = '100%'
  });
  btnClose[i].addEventListener('click', () => {
    CardOpen[i].style.height= '0px'
  })
}
.card-open {
    display: block;
    opacity: 1;
    height: 0px;
}
0
Muhammad Sani 22 Сен 2021 в 13:34