Vue.js之js實現過渡

這次帶給大家Vue.js之js實現過渡，使用Vue.js的js實現過渡的注意事項有哪些，下面就是實戰案例，一起來看一下。

<template>
  <div>
    <button>Toggle</button>
    <div>
      <transition>
        <p>i am show</p>
      </transition>
    </div>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  import comB from &#39;./components/b.vue&#39;
  export default {    components: {comA, comB},
    data () {      
return
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: &#39;50px&#39;,          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: &#39;200px&#39;,          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: &#39;500px&#39;,          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }</script><style>.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}</style>

當讓標籤隱藏時,執行的是leave動畫;
當讓標籤顯示時,執行的是beforeEnter,enter動畫

js過渡動畫

#在學習餓了麼外賣app時,發現這樣寫也可以,
給要執行動畫的標籤添加transition

<div v-show="detailShow" class="detail" transition="fade">

在CSS代碼中

   .detail
      ......
      &.fade-transition
        opacity: 1        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0        background: rgba(7, 17, 27, 0)

這樣就可以簡單的實現一個背景透明度過度的動畫

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js的計算屬性和資料監聽

Vue.js的事件綁定-內建事件綁定、自訂事件綁定

Vue.js的清單資料的同步更新方法

Vue.js的列表渲染v-for 陣列物件子元件

#

以上是Vue.js之js實現過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！