Блог

У меня есть простой переход для переключения текста div, однако переход работает только тогда, когда текст скрывается, однако, когда я нажимаю, чтобы показать текст, переход здесь не работает, это мой код:

 lt;templategt; lt;divgt;  lt;transition name="fade"gt;  lt;div v-if="this.showName"gt;My name is Simonlt;/divgt;  lt;/transitiongt;  lt;button @click="showName = !showName"gt;Togglelt;/buttongt; lt;/divgt; lt;/templategt;  lt;scriptgt; export default {   data(){  return {  showName: false,  }  },   name: "StatusComponent" } lt;/scriptgt;  lt;style scopedgt; .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; } lt;/stylegt;  

 lt;divgt;  lt;p v-if="showName"gt;My name is Simonlt;/pgt; lt;/divgt;  

Вы должны открыть тег p под тегом div