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
相关产品推荐
相关产品推荐

