Vue过渡

Question

亲爱的开发者，我有一个问题。来自Vue comonent的代码

<transition-group name="fading">
        <div v-for="item, id in b_data" :id="id" :dataName="item" v-if="address == item" class="card-body transition" key="d">
          <p class="text-info align-middle">{{ item }} address</p>
        </div>
        </transition-group>

这是代码无法正常工作。但是，如果我改变v-if到v-show所有工作正常。为什么呢？

使用v-show编码

<transition-group name="fading">
        <div v-for="item, id in b_data" :id="id" :dataName="item" v-if="address == item" class="card-body transition" key="d">
          <p class="text-info align-middle">{{ item }} address</p>
        </div>
        </transition-group>

和css代码：

.fading-enter,
  .fading-leave-to
  {
    opacity: 0;
  }

  .fading-enter-active
  {
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
    animation: bounce-in 1s;
  }

  .fading-leave-active
  {
    animation: bounce-in 1s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
      opacity: .5;
    }
    100% {
      transform: scale(1);
      opacity: .2;
    }
  }

我做错了什么？为什么v-if不起作用？