如何使用JS文件添加转场

Question

我正在开发一个网格布局项目。在此项目中，当您将鼠标悬停在元素上时，元素行会增加，因此大小也会增加。问题是这样做的时候变化非常快，而我希望它平稳而缓慢。于是我就想加个过渡，但是没成功。

所以这里背景颜色得到了过渡效果，但第一个元素尺寸的增加却没有。

代码片段可以运行并扩展到全屏。在那里，您将看到将鼠标悬停在第一个元素上时，元素的大小会增加，但看不到任何过渡。身高增长得非常快。但蓝色充满了过渡。我希望尺寸也随着过渡而缓慢增加

我怎样才能做到这一点？

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 100px;
}
.design{
  width: 100%;
  /* padding: 10px; */
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  transition: all 2s;

}
.first {
  grid-row-start: 1;
  grid-row-end: 2;
  transition: all 2s;
}



.first:hover {
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: blue;
}

<div class="container">

  <div class="design first ">
    <img class="instaLogo " src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
  </div>

  <div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
  </div>

  <div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
  </div>


</div>

Answer 1

问题的核心在于您尝试设置动画的属性。

查看文档“grid-row-end”仅允许所谓的“离散”动画。这意味着该属性不会有任何计算出的关键帧。所以它永远不会真正平滑，因为渲染没有中间状态。

因此，如果你想要平滑的动画，你将需要另一个属性来转换。

您可以为容器设置固定高度，然后增加该高度，或者在内部内容周围添加一些填充或边距，并在悬停时为这些值设置动画。这是一个关于它的外观的示例：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding: 100px;
}
.design{
width: 100%;
/* padding: 10px; */
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
transition: all 2s;

}
.first {
grid-row-start: 1;
grid-row-end: 2;
transition: all 2s;
}

.instaLogo{
transition: all 2s;
padding-top:0rem;
padding-bottom:0rem;
}

.first:hover {
background-color: blue;
}
.first:hover .instaLogo{
padding-top:3rem;
padding-bottom:3rem;
}

<div class="container">

<div class="design first ">
    <img class="instaLogo " src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
</div>

<div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
</div>

<div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
</div>


</div>

如果您不希望其他容器增长，您可以添加初始高度的 max-height 并仅增加当前悬停元素的值。