vue js 转换不适用于 v-if 条件

Question

过渡组动画在没有 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;
}
.article-list-enter{
  opacity: 0;
}

Answer 1

问题：v-if如果发现错误，则实际删除元素。过渡作用于现有元素。以及哪些有display:none

解决方案：Vue使用特殊transition属性

new Vue({
  el: '#demo',
  data: {
    transition: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="demo">
  <transition name="fade">
    <p v-if="transition">This will work</p>
  </transition>
  <button v-on:click="transition = !transition">
    Toggle
  </button>
  
</div>

另一个解决方案：当您使用时，opacity: 0;您可以将其绑定到类，如下例所示

new Vue({
  el:'#app',
  data:{
    name:'niklesh',
    transition:false
  },
  methods:{
    addTrans:function(){
      this.transition = !this.transition;
    }
  }
});

.article-list-enter-active{
  transition: all 2s;
}
.article-list-enter{
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div v-if="transition" class="article-list-enter-active " v-bind:class="!transition ? 'article-list-enter':''">
  Transtion  will not work
</div>

<div v-show="transition" class="article-list-enter-active " v-bind:class="!transition ? 'article-list-enter':''">
  Transtion  will not work
</div>


<div class="article-list-enter-active " v-bind:class="!transition ? 'article-list-enter':''">
  Transtion  will work
</div>

<button type="button" @click="addTrans">Click to see transition</button>

</div>