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

Posted 2023-02-16

【中文标题】隐藏div时，过渡在vue上无法正常工作

【英文标题】：Transition not working properly on vue when div is being hiding

【发布时间】：2022-01-15 13:18:16

【问题描述】：

我有简单的转换来切换 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>

【参考方案1】：

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

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