工作中关于vue的transition动画过渡的一个问题总结

最新推荐文章于 2024-07-02 16:56:38 发布

HamsterKnight

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量2.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/HamsterKnight/article/details/93885978

版权

在实际项目中遇到列表页切换需求，通过Vue的transition实现列表项平滑过渡。文章总结了在使用过程中遇到的问题，即点击按钮时两个列表未能按预期顺序动画切换。原因是Vue默认的进入和离开动画同时进行。为解决此问题，应用了transition的mode属性，设置为'out-in'或'in-out'，确保先完成离开动画再进行进入动画，从而达到理想的过渡效果。

摘要由CSDN通过智能技术生成

在公司的项目中，有一个列表页切换的需求

需求：

进来，默认展示列表一，点击button2，列表一向左移出屏幕外，然后列表二向左移动，占据屏幕。

点击button1，则相反。

<div>
      <button class="button1">待完成</button>
      <button class="button2">已完成</button>
</div>
<!--列表一 -->
<transition name="inComplete">
<div class="list1">
    <ul>
    <li>1</li>
        *
        *
        *
    <li>n</li>
    </ul>
</div>
</transition>
<!--列表二 -->

<transition name="hasComplete">
<div class="list2">
 <ul>
    <li>1</li>
        *
        *
        *
    <li>n</li>
    </ul>
</div>
</transition>