如何在Vue3中添加悬停元素的动画？

Question

我想在悬停元素时应用动画。也许现在使用 Transition 组件会更好。动画非常简单，从 1 到 1,5 的缩放比例将元素保留在页面上。所以我认为 v-if 指令在这里不起作用。我是否需要在鼠标悬停和移出时动态更改状态？情况是我不希望元素消失。

<Transition name="bell" type="animation">
  <div class="bell-element"    
    @mouseover="showBell"
    @mouseout="hideBell"
    >
</Transition>
.bell-enter-active {
  animation: bounce-in 0.5s;
}
.bell-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

Answer 1

当您出于动画以外的其他原因在组件上使用 v-if 时，Vuejs 过渡效果很好。在这里你可以只使用原生的 html/css 动画。

.bell-element {
  width: 40px;
  height: 40px;
  background-color: blue;
  
  transition-duration: 250ms;
}

.bell-element:hover {
  transform: scale(1.5);
}

<div class="bell-element"></div>