小编Max*_*ana的帖子

过渡组动画在没有 v-if 条件的情况下可以完美运行。但是当我添加 v-if 时，动画没有出现，我应该如何解决这个问题？

html代码

<template>
  <div class='main-page-articles'>
    <transition-group name="article-list" class='main-page-news' tag='ul' v-if='article_list.length != 0'>
      <li class='main-page-article' v-for='article in article_list' v-bind:key='article.title' v-on:click='redirectToArticle(article.primary_key)'>
        <div class='main-page-article-header'>
          <img class='main-page-article-img' src='https://www.gamereactor.eu/media/35/stellaris_2063523b.jpg'></img>
          <div class='main-page-article-title'>
            <span class='main-page-article-text'>
              {{article.title}}
            </span>
          </div>
          <div class='main-page-article-info'>
            <div class='main-page-article-created'>
              {{article.created}}
            </div>
          </div>
        </div>
        <div class='main-page-article-body'></div>
      </li>
      <li class='main-page-article' v-if='article_list.length != 6' v-for='index in 6 - article_list.length' v-bind:key='index'>
      </li>
    </transition-group>
    <ul class='main-page-news' v-else>
      <li class='main-page-article' v-for='index in 6' v-bind:key='index'>
        <div class='loading-main-article'></div>
      </li>
    </ul>
  </div>
</template>

和CSS

.article-list-enter-active{
  transition: all 1.5s;
} …