JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button @click="show = !show" :test-style="JSON.stringify(['abcd'])">
    Toggle
  </button>
  <transition
    appear
    persisted
    @appear="myAppearFn"
    @enter="myEnterFn"
    @leave="myLeaveFn"
  >
    <div v-show="show">
      Content
    </div>
  </transition>
</div>

JavaScript

Vue.createApp({
  data () {
    return { show: true }
  },
  methods:{
    myAppearFn () {
      debugger
      console.log('appear')
    },
    myEnterFn () {
      console.log('enter')
    },
    myLeaveFn () {
      console.log('leave')
    }

  }
}).mount('#app')