Vue+Quasar文章卡片淡入淡出动画失效问题求助

问题描述 #

作为Vue和Quasar新手，我尝试给文章卡片容器添加淡入淡出动画，已编写父组件和ArticleCard子组件代码，但transition动画未生效。猜测原因是卡片未被切换，仅更新了内容，希望定位问题并获取解决建议。

父组件代码 #

<template>
    <div class="row align-center q-gutter-md">
        <ArticleCard v-for="(article, index) in currentSlice" :article="article" :key="index"/>
    </div>
    <q-btn rounded label="next" @click="changeSlice" class="self-center"></q-btn>
</template>

<script setup>
import { ref } from 'vue';

import ArticleCard from './ArticleCard.vue';
const props = defineProps({
    articles: Array,
    articlesShowed: Number
});

const currentEnd = ref(props.articlesShowed);

const currentSlice = ref(props.articles.slice(0, currentEnd.value));

const changeSlice = () => {
    currentSlice.value = props.articles.slice(currentEnd.value, currentEnd.value + props.articlesShowed);
    currentEnd.value += props.articlesShowed;
}

</script>

ArticleCard子组件代码 #

<template>
    <transition 
        :duration="1000"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
    >
        <q-card class="q-pa-md">
            <q-card-section>
                <div class="text-h6">{{ props.article.title }}</div>
                <q-separator inset></q-separator>
            </q-card-section>
            <q-card-section>{{ article.description }}</q-card-section>
        </q-card>
    </transition>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
    article: Object
});
</script>

问题定位 #

1. v-for的key使用错误：用index作为key时，Vue会复用已有的组件实例，仅更新组件的props内容，不会触发组件的销毁和重建，因此transition的enter/leave动画不会被触发。
2. 动画依赖未确认：子组件使用了animated fadeIn/fadeOut类，若未引入Animate.css，这些类不会生效；或未配置Quasar内置动画的话，也无法正常执行。

解决建议 #

1. 替换v-for的key为唯一标识 #

将父组件中v-for的key从index替换为文章对象的唯一属性（比如article.id，确保每个article都有唯一id），这样切换currentSlice时，Vue会识别为新组件，触发销毁旧组件、创建新组件的流程，从而激活transition动画：

<ArticleCard v-for="article in currentSlice" :article="article" :key="article.id"/>

如果没有id属性，也可以使用article.title（需确保标题唯一），或结合其他属性生成唯一key。

2. 确保动画类生效 #

• 方式一：使用Quasar内置动画：Quasar自带常用动画类，无需额外引入库。只需在quasar.config.js中启用动画：

  // quasar.config.js
  export default configure(function (ctx) {
    return {
      framework: {
        animations: 'all' // 或指定需要的动画，比如['fadeIn', 'fadeOut']
      }
    }
  })
  

  然后修改子组件的transition类，去掉animated前缀：

  <transition 
      :duration="1000"
      enter-active-class="fadeIn"
      leave-active-class="fadeOut"
  >
  

• 方式二：引入Animate.css：如果坚持使用animated前缀的类，需要安装并引入Animate.css：

  npm install animate.css
  

  在main.js或父组件中引入：

  import 'animate.css'
  

3. 优化响应式逻辑（可选） #

将父组件中的currentSlice从ref改为computed，让其自动响应currentEnd的变化，代码更简洁且符合Vue响应式最佳实践：

<script setup>
import { ref, computed } from 'vue';

import ArticleCard from './ArticleCard.vue';
const props = defineProps({
    articles: Array,
    articlesShowed: Number
});

const currentEnd = ref(props.articlesShowed);

const currentSlice = computed(() => {
  return props.articles.slice(currentEnd.value - props.articlesShowed, currentEnd.value);
});

const changeSlice = () => {
    currentEnd.value += props.articlesShowed;
}
</script>

内容的提问来源于stack exchange，提问作者explosivemango