方法一:cssアニメーション
遷移のクラス名遷移のクラス名は,入る/離れる遷移で6つのclassが切り替わる.v-enter:遷移の開始状態を定義します.エレメントが挿入されたときに有効になり、次のフレームで除去されます.v-enter-active:遷移のステータスを定義します.エレメントが挿入されたときに有効になり、transition/animationが完了した後に除去されます.このクラスは遷移のプロセス時間,遅延,曲線関数を定義するために用いることができる.v-enter-to:2.1.8版および以上の定義は遷移の終了状態に入る.要素がフレームに挿入された後に有効になり(v-enterが削除されます)、transition/animationが完了した後に削除されます.v-leave:遷移から離れる開始状態を定義します.遷移がトリガされたときに有効になり、次のフレームで削除されます.v-leave-active:遷移の状態を定義します.要素の遷移の全過程で作用し、遷移がトリガーされた直後に有効になり、transition/animationが完了した後に除去されます.このクラスは遷移のプロセス時間,遅延,曲線関数を定義するために用いることができる.v-leave-to:2.1.8版および以上の定義は遷移から離れた終了状態を定義する.遷移から1フレーム離れた後に有効になり(これと同時にv-leaveが削除されます)、transition/animationが完了した後に削除されます.

  
  
  
  
  



  

      
    
    
      
       ？how much？
    
  
  
  
  
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      },

      methods: {
        fn() {
          this.isShow = !this.isShow
        }
      }
    })
  

方法2:animateを使用する.cssアニメーションライブラリ

  


  

      

    
    
    
    
      
       ？how much？
    
  
  
  
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      },

      methods: {
        fn() {
          this.isShow = !this.isShow
        }
      }
    })
  

方式三、Jsフック関数の使用

  

      

    
      
       ？how much？
    
  
  
  
  
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: false
      },

      methods: {
        beforeEnter(el) {
          //       ，       
          // console.log('before');

          //          
          el.style.transform = 'translateY(300px)'
          el.style.opacity = 0
          el.style.transition = 'all 2s ease'
        },
        enter(el, done) {
          //        
          // console.log('enter');

          //   ：              
          // offsetWidth                ，  ，        
          // el.offsetWidth
          el.offsetHeight

          //             
          el.style.transform = 'translateY(0px)'
          el.style.opacity = 1
          done()
        },
        afterEnter(el) {
          //     
          // console.log('after');

          this.isShow = !this.isShow
        }
      }
    })
  

方式四、velocity jsアニメーションライブラリの使用

  

      

    
      
       ？how much？
    
  
  
  
  
  
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: false
      },

      //    velocity.js     JS   ,  ,     velocity   ,         CSS3   ,   ,      
      methods: {
        beforeEnter(el) {
          //          
          el.style.opacity = 0
          el.style.fontSize = '12px'
          el.style.color = '#f00'
        },
        enter(el, done) {
          //    Velocity.js       ：     jQuery  animate    
          //      ：          
          //      ：            
          //      ：           
          //      ：             
          // Velocity(el, { fontSize: 50, opacity: 1 }, 2000, done)
          Velocity(el, { fontSize: 50, opacity: 1, color: '#0f0' }, {
            duration: 2000,
            complete: done
          })
        },
        afterEnter(el) {
          //     
          this.isShow = !this.isShow
        }
      }
    })