CODEWITHSUNDEEP
vue.js
Max Montana
Max Montana

Reputation: 55

vue js transition doesnt wok with v-if condition

Transition group animation works perfectly without v-if condition. But when i add v-if, animation doesnt appear, how should i fix this?

html code

<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>

and css

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

Upvotes: 2

Views: 1850

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

Problem : v-if actually remove element if found false. and transition works on existing element. and which have display:none

Solution : Vue uses special transition attribute

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>

Another Solution : As you are using opacity: 0; you can bind it to the class like below example

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>

Upvotes: 5

Related Questions