vue中组件的过渡动画

最新推荐文章于 2024-07-13 16:31:11 发布

叨唠

最新推荐文章于 2024-07-13 16:31:11 发布

阅读量278

点赞数

分类专栏： Vue 文章标签： vue 组件过渡

本文链接：https://blog.csdn.net/zyz00000000/article/details/84316435

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签

  <style>
    .fade-enter,
    .fade-leave-to {
      opacity: 0
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 2s
    }
  </style>
</head>

<body>
  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" mode="in-out">
      <child-one v-if="show"></child-one>
      <child-two v-else></child-two>
    </transition>
  </div>
  <script>
    Vue.component('child-one', {
      template: `<div>child-one</div>`
    })
    Vue.component('child-two', {
      template: `<div>child-two</div>`
    })
    new Vue({
      el: '#demo',
      data: {
        show: true
      },
    })
  </script>

2. 动态组件：component组件 :is 属性，来实现组件的过渡效果

  <style>
    .fade-enter,
    .fade-leave-to {
      opacity: 0
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 2s
    }
  </style>
</head>

<body>
  <div id="demo">
    <button @click="handleClick">click me</button>
    <transition name="fade" mode="in-out">
      <component :is="type"></component>
    </transition>
  </div>
  <script>
    Vue.component('child-one', {
      template: `<div>child-one</div>`
    })
    Vue.component('child-two', {
      template: `<div>child-two</div>`
    })
    new Vue({
      el: '#demo',
      data: {
        type: 'child-one'
      },
      methods:{
        handleClick () {
          this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
        }
      }
    })
  </script>