vue3 上拉下拉过度动画

程序猿_“大神”

已于 2022-03-08 16:31:03 修改

阅读量1.4k

点赞数 1

文章标签： css3 css 前端

于 2022-03-08 15:47:01 首次发布

本文链接：https://blog.youkuaiyun.com/dyx001007/article/details/123355474

版权

本文介绍如何在Vue3应用中利用CSS3实现优雅的上拉下拉过渡效果，通过实例代码详细解析关键步骤，帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

代码

<template>
  <div class="home">
    <div class="header">
      <span>未完成</span><span @click="data.showTask = !data.showTask">></span>
    </div>
    <transition name="task">
      <ul v-show="data.showTask" :style="{ height: data.tasks.length * 50 + 'px' }">
        <li v-for="item in data.tasks" :key="item">{
  { item }}</li>
      </ul>
    </transition>
    <div class="header">
      <span>已完成</span
      ><span @click="data.showFinishTask = !data.showFinishTask">></s

最低0.47元/天解锁文章