【Vue.js】transitionを使用してAnimate.cssと組み合わせたい
<head> <!--headタグ内にてanimate.cssを読み込む--> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> </head>
<div id="example-3"> <button @click="show = !show"> Toggle render </button> <!--以下のようにtransitionタグで挟むだけでOK--> <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight" mode="out-in"> <p v-if="show">hello</p> </transition> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#example-3', data: { show: true } }) </script>