Vue官方文档(30):可复用的过渡

amadeus_liu2

于 2022-11-03 10:01:07 发布

阅读量73

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127664598

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<template>
  <div >

    <button @click="show = !show">click</button>

<my-special-transition>

    <p v-if="show">hello</p>

</my-special-transition>


 </div>


</template>

 <script>
 
 import Vue from 'vue'
 Vue.component('my-special-transition', {
  template: '\
    <transition\
      name="very-special-transition"\
      mode="out-in"\
      v-on:before-enter="beforeEnter"\
      v-on:after-enter="afterEnter"\
    >\
      <slot></slot>\
    </transition>\
  ',
  methods: {
    beforeEnter: function (el) {
      console.log(el);
    },
    afterEnter: function (el) {
      console.log(el);
    }
  }
})


  export default{
  components: {

  },
    data() {
      return {
        show: true,

              }
            },
    methods:{


      
    }
  }
      
    </script>

<style >

  

</style>