css - 如何在vue中通过类绑定(bind)正确使用动画？

Question

当我将鼠标悬停在图像上时，我试图显示缩放效果和动画。我正在使用 vue 的类绑定(bind)(可以在问题定义之后看到)。问题是我用动画缩放图像，但随后再次调用缩放类，如果我不将鼠标从图像上移开，我会再次看到缩放图像。

我试过不同的动画，但同样的问题存在，过渡似乎也不起作用。

<v-avatar>
      <img v-if="img" :src="img" :class="{ zoom: hover }" alt="" />
</v-avatar>

@keyframes change {
  0% {
    transform: scale(0) translateX(0px);
  }
  100% {
    transform: scale(2.8) translateX(40px);
  }
}

.zoom {
  max-width: 100%;
  height: auto;
  border-radius: 10%;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.5);
  animation: change 1s;
}

我希望看到带有动画的缩放行为，但是当鼠标仍在头像上时不应再次调用缩放类。所以这意味着我希望缩放效果只在鼠标悬停时显示一次。

Answer 1

您应该使用 css :hover 选择器而不是动画关键帧来实现鼠标悬停(悬停)时的缩放

.image {
  border-radius: 10%;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.5);
  transition: 0.4s transform;
}

.image:hover {
  transform: scale(2.8) translateX(40px);
}

<img src="https://picsum.photos/id/237/200/300" class="image" />