JSFiddle - React, Tailwind, and code Playground

by flourscent

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <p><input type="text" v-model="animationClass"></p>
  <button @click="isShown = !isShown">트랜지션</button>
  <!-- 요소의 클래스 변경에 트랜지션 애니메이션을 적용하기 위해 enter-active-class 프로퍼티와 
  leave-active-class 프로퍼티를 지정 -->
  <transition :enter-active-class="activeClass" :leave-active-class="activeClass">
    <p v-show="isShown">Hello, world!</p>
  </transition>
</div>

JavaScript

new Vue({
  el: '#app',
  data: function() {
    return {
      animationClass: 'bounce',
      isShown: false,
    };
  },
  computed: {
    activeClass: function() {
      // 활성화할 클래스가 무엇인지 계산. input 필드의 입력값에 따라 바뀐다.
      return this.animationClass + ' animated';
    },
  },
});