如何向 .class:not(:hover) 添加过渡？

Question

我一直在研究一个悬停画廊，一旦其中一个元素悬停，它就会增长到整个画廊的大小，而其他所有内容都设置为不透明度：0 和高度：0。在任何地方添加过渡在其 class 或 gallery-wrap 中不起作用，也没有任何效果。我必须将它放在哪个 class 中才能按预期工作？

我试过过渡：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,0,0,1), rgba(0,0,0,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，而悬停的元素应该增长到画廊包装的大小。谢谢您的帮助！ :)

Answer 1

您的 .gallery-item 元素从未指定的高度跳到 height: 0;，没有任何过渡。

因此，如果您稍微修改 .gallery-item 选择器，您应该会得到想要的：

.gallery-item {
    height: 8vh; /* New */
    transition: 0.8s; /* New */

  &:hover {
    height: 0;

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

如何向 .class:not(:hover) 添加过渡？

How can you add a transition to .class:not(:hover)?

html

css

sass

gallery

hover