问答

vue transition配合v-if没有动画

作者:admin 2021-05-07 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<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);
###

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue transition配合v-if没有动画

    vue transition配合v-if没有动画

  • 页面通过script标签引入了html2canvas

    页面通过script标签引入了html2canvas

  • 为什么同一个链接用chrome打开就是下载

    为什么同一个链接用chrome打开就是下载

  • java maven 问题

    java maven 问题

腾讯云代理商
海外云服务器