Vue.js之js实现过渡

这次给大家带来Vue.js之js实现过渡，使用Vue.js的js实现过渡的注意事项有哪些，下面就是实战案例，一起来看一下。

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    57896a1fb838dcabcd3d570a2181ca03Toggle65281c5ac262bf6d81768915a4a77ac0
    83769e44d1ffd10a12720f04018026d2
      0de50695ecb5fe42c1ad82a7743dc164
        b78e0c168ea2246277c4195a14583feei am show94b3e26ee717c64999d7867364b1b4a3
      6087faffb1c3f26530d25a6b190c2f81
    16b28748ea4df4d9c2150843fecfba68
  16b28748ea4df4d9c2150843fecfba6821c97d3a051048b8e55e3c8f199a54b23f1c4e4b6b16bbbd69b2ee476dc4f83a
  import comA from './components/a.vue'
  import comB from './components/b.vue'
  export default {    components: {comA, comB},
    data () {      
return
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: '50px',          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: '200px',          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: '500px',          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }2cacc6d41bbb37262a98f745aa00fbf0c9ccee2e6ea535a969eb3f532ad9fe89.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}531ac245ce3e4fe3d50054a55f265927

当让标签隐藏时,执行的是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 数组 对象 子组件

Atas ialah kandungan terperinci Vue.js之js实现过渡. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!