我一直在一个悬停画廊上，一旦其中一个元素被悬停，它就会增长到整个画廊的大小，而其他所有元素都设置为opacity：0和height：0。在其任何位置添加过渡类或画廊换行不起作用，也没有任何效果。我必须在哪一堂课上讲，这样可以正常使用？

我尝试过过渡：10秒钟，但是到目前为止，它在任何地方都没有起作用。

HTML:

          <div class="gallery-wrap">
            <div class="gallery-item" style="--n: 0">
              <div style="background-image: url(assets/images/first.jpg);" class="gallery-part"></div>
              <p>First</p>
            </div>
            <div class="gallery-item" style="--n: 1">
              <div style="background-image: url(assets/images/second.JPG);" class="gallery-part"></div>
              <p>Second</p>
            </div>
            <div class="gallery-item" style="--n: 2">
              <div style="background-image: url(assets/images/third.jpeg);" class="gallery-part"></div>
              <p>Thir</p>
            </div>
            <div class="gallery-item" style="--n: 3">
              <div style="background-image: url(assets/images/fourth.jpg);" class="gallery-part"></div>
              <p>Fourth</p>
            </div>
            <div class="gallery-item" style="--n: 4">
              <div style="background-image: url(assets/images/fifth.jpg);" class="gallery-part"></div>
              <p>Fifth</p>
            </div>
            <div class="gallery-item" style="--n: 5">
              <div style="background-image: url(assets/images/sixth.jpg); --n: 5" class="gallery-part"></div>
              <p>Sixth</p>
            </div>
          </div>

SCSS:

.gallery-wrap{
  width: 28vw;
  height: 48vh;
  overflow: hidden;
  .gallery-part{
    transition: .8s;
    overflow: hidden;
    height: 8vh;
    background-size: cover;
    opacity: .1;
    filter: grayscale(100%);
    mask-image: linear-gradient(to bottom,rgba(0,1),0) 250%);
  }
  p{
    padding-left: 2%;
    position: fixed;
    margin-top: 0;
    transform: translateY(-8vh);
  }
  &:hover{
    > .gallery-item:not(:hover){
      opacity: 0;
      height: 0;
    }
    > .gallery-item{
      &:hover{
        height: 48vh;
      }
    }
  }
}

.gallery-item{
  &:hover{
    height: 0;
    > .gallery-part{
      opacity: 1;
      height: 48vh;
      filter: none;
    }
  }
}

应该是平稳过渡，而不是跳跃过渡。因此，所有画廊物品（但已悬停的物品）的高度应缓慢移动到0，而悬停的元素应增长到画廊包裹的大小。 谢谢您的帮助！ ：）