javascript - 如何实现重叠图像的变换？

Question

我在转换网页中的内容框时遇到问题。我有使用网格定位的三个重叠图像的 div，我想缩放其中一个以填充鼠标滚动上的整个 div。我成功了，但是我无法动画化这个转变。我有什么办法可以做到这一点吗？要么使用网格系统，要么不使用。

 <div
      class="project-box-main"
      @mousewheel="onScroll"
    >
      <div class="project-image project-top-image">
        <img src="@/assets/img/1_top.png" />
      </div>
      <div class="project-image project-right-image">
        <img src="@/assets/img/1_right.png" />
      </div>
      <div class="project-image project-main-image"       
          :class="{ fillWithMainImage: scrollPosition > 0 }">
        <img src="@/assets/img/1_main.png" />
      </div>
    </div>

.project-top-image {
    grid-column: 4 / 15;
    grid-row: 1 / 10;
}

.project-right-image {
    grid-column: 14 / 18;
    grid-row: 3 / 13;
}

.project-main-image {
    grid-column: 6 / 17;
    grid-row: 8 / 20;
}

.fillWithMainImage img{
     grid-column: 1 / 21;
    grid-row: 1 / 21; 
}

Answer 1

你想做这样的事情，使用 transition: all 0.3s escape-in​​-out;

.container{
  display:flex;
  justify-content:center;
  height:100vh;
  width:100vw;
  align-items:center;
  transition: all 0.3s ease-in-out;
}

img{
  height:auto;
  transition: all 0.3s ease-in-out;
}

img:hover{
 flex-grow:1
}

<div class="container">
  <img src="https://loremflickr.com/640/360"   width="400" alt=""/>
</div>