JSFiddle - React, Tailwind, and code Playground

by godbasin

HTML

<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>
</body>

JavaScript

new Vue({
  el: '#example-4',
  data: {
    show: true
  },
  methods: {
    enter: (el, done) => {
       // 元素已被插入 DOM
    	// 在动画结束后调用 done
    	$(el)
      	.css('opacity', 0)
      	.animate({ opacity: 1, fontSize: '100px' }, 1000, done)    
    },
    leave: (el, done) => {
        // 与 enter 相同
        $(el).animate({ opacity: 0, fontSize: '0px' }, 1000, done)
    }
  }
})