我有一個組件，它是通過在mounted()方法期間執行的API調用從后端檢索的元素列表。我想動畫列表的所有元素，所以每個元素都有一個動畫出現在屏幕上。我試過用& lttransition-group & gt；，但是當它們被加載時，它們只是出現在屏幕上，沒有任何動畫。這是我的組件:

<template>
    <div class="container">
      <transition-group tag="ul" id="tenderList" name="tender-list">
        <li v-for="tender in tenders" :key="tender.name">
          <div class="head">
            <h2>{{ tender.expedient }}</h2>
            <h2 v-if="tender.value">{{ tender.value }}</h2>
          </div>
          <h3 class="type">{{ tender.contractType }}</h3>
          <h3 class="organization">{{ tender.contractingOrganization }}</h3>
          <p class="text">{{ tender.name }}</p>
        </li>
      </transition-group>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tenders: [],
    };
  },
  methods: {
    loadTenders() {
      fetch('http://127.0.0.1:3000/v1/tenders?limit=20&page=1')
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
        })
        .then((data) => {
          data = data.data.doc;
          const tenders = [];
          data.forEach((tender) => {
            const formattedValue = tender.contractEstimatedValue
              ? parseFloat(tender.contractEstimatedValue).toLocaleString(
                  'es-ES',
                  {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 2,
                  }
                ) + ' €'
              : '';
            tenders.push({
              expedient: tender.expedient,
              contractType: tender.contractType,
              name: tender.name,
              value: formattedValue,
              contractingOrganization: tender.contractingOrganization.name,
            });
          });
          this.tenders = tenders;
        });
    },
  },
  mounted() {
    this.loadTenders();
  },
};
</script>

<style scoped>
.container {
  justify-content: center;
  display: flex;
}
#tenderList {
  list-style-type: none;
}
li {
  margin: 2rem auto;
  width: 40rem;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.26);
  background-color: #2b2b2b;
}
.head {
  display: flex;
  justify-content: space-between;
}

.head,
.text,
.organization,
.type {
  max-width: 38rem;
}

.user-list-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.user-list-enter-active {
  transition: all 20s ease-out;
}

.user-list-enter-to {
  opacity: 1;
  transform: translateX(0);
}
</style>

我做錯什么了嗎？為什么他們沒有動畫？