子组件上的转换

我正在建立一个基本的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工作得很好,但是文本组件fadeinup-fadeout不起作用。

我哪里出问题了?