カスタムトランジションクラス

外部ライブラリを使って、文字が右側へ消えたり

文字が振動したりします

HTML

 <div id="app">
    <button v-on:click="show = !show">表示を切り替える</button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"> 
      <p v-if="show">
        @Entity<br>
        @table(name="USER_DATA_1")<br>
        public class UserEntity01 implements Serializable {<br>
          @Id @NotNull<br>
          private String id;<br>
          private String name;<br>
          private String zipcode;<br>
          private String address;<br>
          @Embedded<br>
          private Contact co;<br>
          <br>
          public UserEntity01() {}
      </p>
    </transition>   
  </div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
   show: true
  }
});
動画はこちら