隐藏div时，过渡在vue上无法正常工作

Question

我有简单的转换来切换 div 文本，但是转换仅在隐藏文本时起作用，但是当我单击显示文本时，转换在这里不起作用，这是我的代码：

<template>
<div>
    <transition name="fade">
        <div v-if="this.showName">My name is Simon</div>
    </transition>
    <button @click="showName = !showName">Toggle</button>
</div>
</template>

<script>
export default {

    data(){
      return {
          showName: false,
      }
    },

    name: "StatusComponent"
}
</script>

<style scoped>
.fade-enter-from{
    opacity: 0;
}
.fade-enter-to{
    opacity: 1;
}
.fade-enter-active{
    transition: all 2s ease;
}
.fade-leave-from{
    opacity: 1;
}
.fade-leave-to{
    opacity: 0;
}
.fade-leave-active{
    transition: all 2s ease;
}
</style>

Answer 1

<div>
   <p  v-if="showName">My name is Simon</p>
</div>

你应该在div标签下打开一个p标签