Question

伙计们，我对动画有疑问。我有一个图像，它在悬停时做了一些过渡，但是下面的文本略有移动。我需要它留在原处，因为它弄乱了我的布局。我试图按照此处类似问题中的建议使用绝对位置，但对我不起作用。你有什么想法我该如何解决？

<div class="album-item">
  <div class="album-img"><img src="https://is2-ssl.mzstatic.com/image/thumb/Music114/v4/97/e6/70/97e670f6-361b-a23d-617a-52bafcd631cd/075679854247.jpg/170x170bb-85.png" /></div>

  <div class="album-card">
    <h4>title</h4>
    <span>name</span> <span>released</span>
  </div>
</div>

.album-item {
  background-color: gray;
  width: 170px;
  margin: 25px;
}

h4 {
  align-content: center;
  margin: 5px;
}

.album-img {
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.8;
}

img:hover {
  -webkit-transform: scale(1.12, 1.12);
  transform: scale(1.12, 1.12);
  opacity: 1;
  border: 1px solid yellow;
  border-radius: 2px;
  cursor: pointer;
}

.album-card {
}

您可以看到它在这里几乎没有移动，但是我有多个这样的图块，而且它确实弄糟了，因此我需要将文本保留在一个位置。

Answer 1

如果要保留文本，请不要在两种状态之间更改其上方元素的几何形状。在您的情况下，您可以通过将元素的边框设置为不同的宽度来更改大小。

要修复此问题，请为非悬停的元素提供相等的边框宽度，并使颜色透明。

.album-item {
  background-color: gray;
  width: 170px;
  margin: 25px;
}

h4 {
  align-content: center;
  margin: 5px;
}

.album-img {
}

img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: -1px 0 0 -1px;
  border: 1px solid transparent;
  border-radius: 3px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.8;
  display: block;
}

img:hover {
  -webkit-transform: scale(1.12, 1.12);
  transform: scale(1.12, 1.12);
  opacity: 1;
  border-color: yellow;
  border-radius: 2px;
  cursor: pointer;
}

.album-card {
}

<div class="album-item">
  <div class="album-img"><img src="https://is2-ssl.mzstatic.com/image/thumb/Music114/v4/97/e6/70/97e670f6-361b-a23d-617a-52bafcd631cd/075679854247.jpg/170x170bb-85.png" /></div>

  <div class="album-card">
    <h4>title</h4>
    <span>name</span> <span>released</span>
  </div>
</div>

过渡动画期间的文本移动

1 个答案: