vue transition配合v-if没有动画

Question

<transition name="userList">
   <ul class="nav-bar-user-list" v-if="isShowPopper">
      <li>
      <i class="el-icon-switch-button"></i>
      <span class="logout">退出登录</span>
    </li>
  </ul>
</transition>

.userList-enter-active, .userList-leave-active{
  transform: scaleY(1);
  transform-origin: center top;
  transition: $--md-fade-transition;
}

.userList-enter, .userList-leave-to{
  transform: scaleY(0);
}

$--md-fade-transition: transform 3000ms cubic-bezier(0.23, 1, 0.32, 1), opacity 3000ms cubic-bezier(0.23, 1, 0.32, 1);

Answer 1

经过测试代码是没问题的
可能原因是 nav-bar-user-list 这个ul 还有其他样式导致你看不见这个元素
尝试吧你的ul的样式修改一下,比如加个边框,就是让他变的明显点在试试看

Answer 2

isShowPopper是不是状态没有正确改过来呀，或者你css样式不是scss的。