vue 當mouseenter，fadeIn某element，反之

Question

<div 
          class="relative" 
          @mouseleave="handleLeave(item)">
          <img 
            class="animate__animated animate__fadeIn pointer" 
            :style="`width: ${width}px; height: ${height}px; object-fit: cover;`" 
            :src="item.src"
            @mouseenter="handleEnter(item)"
            @click="handleView(item)">
          <div 
            v-if="item.titleShow"
            class="padding title-show">
            {{ item.title }}
          </div>
        </div>

handleEnter(item) {
      item.titleShow = true
    },
    handleLeave(item) {
      item.titleShow = false
    },

item.titleShow 運作正常
滑鼠移過去後就會展示，反之

只是我想問
如何讓外面的div可以做到鼠標移進去時，可以fadeIn，反之？

Answer 1

可以使用vue中built-in的transition组件
参考代码:
https://codesandbox.io/s/bill...

官方示例

Answer 2

fadeIn可以使用动画或者过渡来实现，过渡就是对opacity进行过渡，titleShow控制元素类的添加和移除，元素原本opacity为0，fadeIn时titleShow为true，添加类，opacity变为1，移除的时候又自动变为0，但是使用过渡就需要元素提前占位，不能再使用v-if让他销毁，而使用动画这没有这个问题