Question

我正在建立一个基本的SPA，并在页面之间进行转换。页面之间的过渡工作正常，但是子组件不会运行其过渡。

index.vue：

<template>
  <main class="animated">
    <text-content :content="content"></text-content>
  </main>
</template>

<script>
import TextContent from '~/components/TextContent.vue'

export default {
  transition: {
    enterActiveClass: 'animated fadeIn',
    leaveActiveClass: 'animated fadeOut'
  },

  components: {
    TextContent
  },


  data() {
    return {
      content: {
        title: 'Title',
        body: '<p>Content</p>'
      }
    }
  }
}
</script>

然后是我的子组件TextContent.vue：

<template>
    <section class="container mx-auto my-14">
        <h1 class="mb-8">{{ content.title }}</h1>

        <div v-html="content.body">{{ content.body }}</div>
    </section>
</template>

<script>
export default {
  transition: {
    enterActiveClass: 'animated fadeInUp',
    leaveActiveClass: 'animated fadeOutDown'
  },

  props: ['content']
}
</script>

因此页面fadeIn-fadeOut可以很好地工作，但是TextComponents fadeInUp-fadeInOut不能。

我在哪里错了？

Answer 1

transition属性仅与组件的路径转换有关，请在模板中使用<transition>标签，并使用appear在初始渲染时运行转换：

<template>
  <main class="animated">
   <transition  
         appear-active-class="animated fadeInUp"
         appear>
      <text-content :content="content"></text-content>
   <transition>
  </main>
</template>

子组件的过渡

1 个答案: