Как вы можете добавить переход к .class: not (: hover)? - PullRequest
Новая
       33

Как вы можете добавить переход к .class: not (: hover)?

0 голосов
/ 05 ноября 2019

Я работал над галереей при наведении, где, когда один из элементов наведен, он увеличивается до размера всей галереи, в то время как все остальное устанавливается на непрозрачность: 0 и высоту: 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,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, в то время как наведенный элемент должен увеличиваться до размера обтекания галереи. Спасибо за помощь! :)

1 Ответ

0 голосов
/ 05 ноября 2019

Ваши .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;
    }
  }
}
...