子组件的过渡

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>

子组件的过渡

Transitions on child components

vue.js

vue-router

nuxt.js