扁平化Tree组件Vue3过渡动画

已于 2024-07-25 06:16:48 修改
阅读量254 收藏 4
点赞数 11
分类专栏： Vue3开源组件实战 文章标签： vite vue3 过渡动画 transition
于 2024-07-21 14:04:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/felix_alone2012/article/details/140587455
版权

本小节在巧用Vue3 composition api的计算属性实现扁平化tree连线
的基础上实现动画效果。

看下目前的实现，展开折叠比较生硬，正好我们用vue提供的过渡动画特性来优化用户体验。
在这里插入图片描述

模板应用动画

在这里插入图片描述
在for循环渲染外面应用过渡组标签，对每个节点的v-show进行过渡动画控制；对每个节点内部的参照线应用过渡动画。注意，节点内容区域用一个div包起来，以便在动画运行时设置overflow: hidden。

测试发现内层的参照线折叠的过渡动画未生效，手动进行设置修复：
在这里插入图片描述

动画样式

在这里插入图片描述
在全局样式中引入：
在这里插入图片描述
效果：
在这里插入图片描述

Java小卷
关注
  • 11
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue面试总结
Lee__603的博客
10-08 583
private:是表示私有的，只能在类中访问，不能在子类或者对象中访问，要调用私有的属性或者方法，可以通过在类中设置公有的方法访问私有的成员，对外暴露公有的方法进行访问，​子类继承的时候，也可以继承父类私有的属性和方法，但是也要通过在子类继承过来的公有的方法进行访问私有的属性​。- Promise.all()：用于将多个 Promise 实例，包装成一个新的 Promise 实例，接受一个数组作为参数，只有数组里面的每个状态都变成resolve，则新的 Promise 实例状态才会变成resolve.
Vue面试题汇总（持续更新中）
xieyuleisss的博客
09-11 895
1.什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Mo
vue3-treeview:vue js 3中的一个简单的treeview
04-08
测试 项目设置 This project is under construction don't use !
ts vue3 tree
dualvencsdn的博客
09-20 454
查阅了很多的tree 好像还是ztree 全面点呢。
vue3 组件库 (六)：Tree 组件
weixin_43960320的博客
03-23 6886
在工作中我们经常会用到Tree组件，今天就来实现一个简易版的Tree组件，完整的代码请到仓库获取在线预览github 地址 数据展示 先来看看用户传递过来的数据 从上面的使用可以了解到需要定义接收 data、props属性，触发一个node-click事件 getNodes 将用户传递过来的数据进行转换renderContext 使用转换后的数据渲染，需要考虑有子节点和没有子节点的情况初次渲染的效果 renderContext中给content添加is-expand类，展开条件判断
【vue3 + antd】Tree 树形控件
m0_65041204的博客
01-18 1542
antd-tree默认展开所有层级，点击文字时也能选中对应节点
Vue3---手写Tree组件
Dormiveglia-flx的博客
04-04 1616
1 添加myOptions ,使之双向绑定，绑定的数据来自prop.options传来的数据，不直接用prop.options传来数据的原因是因为要加isOpen，防止原数据遭到污染。但是问题是现在的数据有的item会有4层的children，有的item会有10层的children，，但是我们不能准确的知道需要使用多少个v-for。重点：通过isOpen属性的true，false，来使组件是否v-show隐藏显示。关于使用v-for 和 递归时候，数据是怎么渲染出来的分析。，这个时候，我们可以考虑。
vue d3 svg tree树状图
czy279470138的博客
03-22 4184
用的是d3.v3 版本 展示没有问题，细节有问题。 采用的是自己的json，调接口的没有总结，太麻烦了。 下面地址是原声的，支持提示框可复制文字，并且节点之间不会重叠，tree.size 改成 tree.nodeSize 即可 https://blog.csdn.net/czy279470138/article/details/88419831 <style> ...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 751
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
vue组织树（树形组件vue3)
m0_49159526的博客
06-21 7127
本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的基础上，又增加了组织树展示效果，并同时支持拖拽，及自定义组织树的展开收起样式......
vue3-treeselect:vue 3的树选择组件（下一个）
04-13
vue3树选择 具有嵌套选项的多选组件支持 。感谢及其源代码和库，以此作为vue 2的基础。 从他的资料库中取得重大变化： 属性value => modelValue 事件input => updated:modelValue 现在将插槽与<template> 特征 带有嵌套选项的单选和多选支持 模糊匹配 异步搜索 延迟加载（仅在需要时加载深度选项的数据） 键盘支持（使用“向上箭头”和“向下箭头”导航，使用“ Enter ”键选择选项，等等） 丰富的选项和高度可定制的 支持多种浏览器（请参阅） RTL支持 需要Vue 3.0+ 入门 建议通过npm安装vue3-treeselect，并使用类的捆绑器来构建您的应用程序。 npm install --save vue3-treeselect 本示例说明如何将vue3-treeselect与集成在一起。 <!-- Vue
vue3-router-tree:表示路由结构的树
05-29
Vue 3 路由器树 此组件基于Vue.js 3 ，它将您的路由或项目表示为树视图，默认情况下将路由配置作为项目，但您可以提供遵循以下格式的自定义项目： [ { path : '/somePath' , //optional name : 'someName' , //required component : SomeComponent //optional but if it's provided the tree node will be a link that redirects to this component children : [ ] } ] 当您想要自定义项目呈现时，您还可以添加您需要的任何其他字段 演示版 或者你可以在codeandbox上检查这个 安装 npm install vue3-rou
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
vue.js 实现点击展开收起动画效果
12-29
最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图： vue页面： 2018年0{{index+6}}月
利用递归组件实现一个简单的树组件（vue3）
qq_2511276124的博客
11-11 1895
闲来无事不从容，睡觉东窗日已红。 万物静观皆自得，四时佳兴与认同。 最近学习vue3组件的时候实现了一个简单的树组件。话不多说，直接上代码。 这个数组件实现了展开、选中和选择三个基本效果。如果有兴趣的话，可以自己参考代码实现其他更加牛叉的效果，例如，自定义树结构，单多选，搜索、排序等等。
[vue3] Tree/TreeSelect树形控件使用
沫洺的博客
10-31 5661
Tree/TreeSelect树形控件使用
Vue3 封装Tree树形组件，且只支持单选
最新发布
weixin_48112768的博客
01-24 667
【代码】Vue3 封装Tree树形组件，且只支持单选。
vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
weixin_44867717的博客
09-22 2977
【代码】vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值