You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vuetify中如何实现v-img组件的弹跳动画效果?

问题:如何为Vuetify的v-img组件实现拖拽放置后的弹跳过渡动画?

我在项目中使用Vuetify的v-chip组件,在拖拽移动并放置这些组件时,通过bounce过渡实现了弹跳动画,代码如下:

<Transition name="bounce">
  <v-chip ......
</Transition>

对应的CSS代码:

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

这套方案对v-chip有效,但将相同技术应用到v-img组件时却没有弹跳效果。请问如何实现v-img的弹跳动画?


后续补充

@Moritz的回答优化了我的弹跳动画,很好地解答了最初的问题。不过@yoduh的评论指出了核心问题:我修改了图片的移动方式,导致响应式的v-img未感知到DOM变化。因此我现在直接使用:

<v-chip class="bounce-enter-active"......

替代原来的:

<Transition name="bounce">
  <v-chip......
</Transition>

或许我应该将此作为答案,但它并未真正解答我最初的问题!


内容的提问来源于stack exchange,提问作者quilkin

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.23 00:12:36