過渡到淡化一個元素不作業

我的代碼中出現了一個問題，可能有人知道解決辦法。

我創建了一些卡片，我希望當我點擊其中一個卡片時，上面出現一個更大的新卡片。我通過一個for回圈很容易做到，但問題是過渡，我想設定一個平滑的過渡。

大卡片的初始狀態是display: none;和opacity: 0;。 我知道我們不能淡化display none元素，但我的想法是先設定一個display: block，然后在 "card-open "元素中用css的過渡屬性設定opacity: 1。

但過渡不作業，它使我瘋狂，因為我不知道為什么

我在這里分享代碼本的鏈接。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'/span>
    CardOpen[i].style.opacity = '1'。
  });
  btnClose[i].addEventListener('click', () =>  {
    CardOpen[i].style.opacity = '0'/span>
    CardOpen[i].style.display = 'none'。
  })
}

PS: 我不能設定顯示塊，只是切換不透明度，因為如果我這樣做，我就不能使用其他卡的z-index。

uj5u.com熱心網友回復：

你可以用可見性代替顯示，顯示在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'/span>
    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 easy-in-out;
}
.card {
    width: 200px;
    height: 200px;
    background: 深紅色。
    margin: 20px;
    cursor: 指標。
    transition: 所有0.4s easy-in-out。
}
.card-open {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    visibility: hidden;
    opacity: 0;
    transition: 所有0.4s easy-in-out;
}
.card-open span {
    color: #fff;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform:translateX（-50%）。
    cursor: 指標。
}

<div class="container-card"/span>>
      <div class="card card1"/span>> </div>>
      <div class="card card2"/span>> </div>>
      <div class="card card3"/span>> </div>>
      <div class="card card4"/span>> </div>>
      <div class="card card5"/span>> </div>>
      <div class="card card6"/span>> </div>>
      <div class="card card7"/span>> </div>>
      <div class="card card8"/span>> </div>>
      <div class="card card9"/span>> </div>>
      <div class="card card10"/span>> </div>>
      <div class="card-open open1">/span>< span class="close"> close< /span></div>
      <div class="card-open open2">/span>< span class="close">/span>close< /span></div>
      <div class="card-open open3">/span>< span class="close"> close< /span></div>
      <div class="card-open open4">/span>< span class="close"> close< /span></div>
      <div class="card-open open5">/span>< span class="close"> close< /span></div>
      <div class="card-open open6">/span>< span class="close"> close< /span></div>
      <div class="card-open open7">/span>< span class="close"> close< /span></div>
      <div class="card-open open8">/span>< span class="close"> close< /span></div>
      <div class="card-open open9">/span>< span class="close"> close< /span></div>
      <div class="card-open open10">/span>< span class="close"> close< /span></div>
    </div>/span>

uj5u.com熱心網友回復：

這里是你應該制作的小改動和補充。這樣就可以了。

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

標籤：

上一篇：Top:50%的css在safari中不作業，但在chrome中可以作業。

下一篇：使用TailwindCSS將文本居中并將圖示放在右邊