扁平化Tree组件Vue3过渡动画

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

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

模板应用动画

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

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

动画样式

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3268123.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【全面介绍Pip换源】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

【QT】UDP

目录 核心API 示例:回显服务器 服务器端编写: 第一步:创建出socket对象 第二步: 连接信号槽 第三步:绑定端口号 第四步:编写信号槽所绑定方法 第五步:编写第四步中处理请求的方法 客户端…

Linxu系统:hwclock命令

1、命令详解: hwclock命令用于显示与设定硬件时钟。它是一种访问硬件时钟的工具,可以显示当前时间,将硬件时钟设置为指定的时间,将硬件时钟设置为系统时间,以及从硬件时钟设置系统时间。您还可以定期运行hwlock以插入或…

C++迈向精通:STL-iterator_traits迭代器类型萃取解析

STL-iterator_traits迭代器类型萃取解析 源码 在阅读STL源码的时候遇到了这样的一行代码: 通过ctags跳转到对应的定义区域: 下面还有两个特化版本: 根据英文释义,发现模板中需要传入的是一个迭代器类型,在上面找到源…

Platform Designer 自定义IP(用于纯RTL设计)

在开始菜单找到Quartus Prime工具,点击并打开。 点击Quartus菜单File——New: 选择Verilog HDL File,点击OK: 这是新建的.v文件如下: 在新建的.v文件中键入如下Verilog代码: module mux2x1( //模块的开头…

第二证券:特斯拉Robotaxi将于10月发布 煤炭高景气有望延续

煤炭高景气有望延续 2022年以来随着国内煤炭稳价政策逐步落地,动力煤价格逐步回归,特别自2023年下半年以来,国内动力煤价格坚持高位窄幅轰动。炼焦煤方面,2021年国内炼焦煤价格总体亦出现宽幅轰动走势,2022年以来国内…

kettle从入门到精通 第八十一课 ETL之kettle kettle中的json对象字段写入postgresql中的json字段正确姿势

1、上一节可讲解了如何将json数据写入pg数据库表中的json字段,虽然实现了效果,但若客户继续使用表输出步骤则仍然无法解决问题。 正确的的解决方式是设置数据库连接参数stringtypeunspecified 2、stringtypeunspecified 参数的作用: 当设置…

大模型将在医疗、教育领域发力,北京发布“人工智能 +”行动计划

IT之家 7 月 26 日消息,北京市发展和改革委员会、北京市经济和信息化局北京市科学技术委员会、中关村科技园区管理委员会今日发布了《北京市推动“人工智能 ”行动计划(2024-2025 年)》。 《行动计划》提出了发展目标:2025 年底&…

【动态规划】不同路径

不同路径&#xff08;难度&#xff1a;中等&#xff09; AC代码 有点水 class Solution { public:int uniquePaths(int m, int n) {//以m为行&#xff0c;n为列&#xff0c;创建二维数组vector <vector<int>> dp(m1,vector<int>(n1));dp[0][1]1;dp[1][0]1;…

仿学校网页

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>学校网页</title> <style>.WebTop{backg…

线程池的理解以及实现线程池

线程池可以干什么&#xff1a; 帮助我们减少线程的创建和销毁提高系统资源的利用率&#xff0c;同时控制并发执行的线程数量便于管理且提高响应速度 线程池的工作流程&#xff1a; 1.创建线程池 线程池的创建是通过 Executors 工厂方法或直接使用 ThreadPoolExecutor 构造函…

认证中心:基于cookie和session实现单点登陆

流程图 参数 不同域名之下&#xff08;不同父域名&#xff09; cookiesessionredis 流程追踪 用户访问系统1的受保护资源&#xff0c;系统1发现用户未登录&#xff0c;跳转至sso认证中心&#xff0c;并将自己的地址作为参数 sso认证中心发现用户未登录&#xff0c;将用户引…

arduino简要总述(控制LED及220V节能灯)

arduino简要总述&#xff08;控制LED及220V节能灯&#xff09; ArduinoArduinoIDE下载安装Arduino UNO R3 开发板介绍Atmel atmega 328微控制器端口数字输入输出端口端口0和端口1模拟输入端口模拟输出端口&#xff08;~11等&#xff09; 什么是数字信号及模拟信号&#xff1f;数…

大数据管理中心设计规划方案(可编辑的43页PPT)

引言&#xff1a;随着企业业务的快速发展&#xff0c;数据量急剧增长&#xff0c;传统数据管理方式已无法满足高效处理和分析大数据的需求。建立一个集数据存储、处理、分析、可视化于一体的大数据管理中心&#xff0c;提升数据处理能力&#xff0c;加速业务决策过程&#xff0…

【Android】使用ViewPager2与TabLayout实现顶部导航栏+页面切换

【Android】使用ViewPager2与TabLayout实现顶部导航栏&#xff0b;页面切换 TabLayout与ViewPager2概述 TabLayout TabLayout 是 Android 支持库中的一个组件&#xff0c;它是 Design 支持库的一部分。TabLayout 提供了一个水平的标签页界面&#xff0c;允许用户在不同的视图…

mysql触发器与存储过程练习

建立两个表:goods(商品表)、orders(订单表) 建立触发器&#xff0c;订单表中增加订单数量后&#xff0c;商品表商品数量同步减少对应的商品订单出数量,并测试 建立触发器&#xff0c;实现功能:客户取消订单&#xff0c;恢复商品表对应商品的数量 建立触发器&#xff0c;实现功…

Florence2:Advancing a unified representation for a variety of vision tasks

Florence-2模型:开启统一视觉基础模型的新篇章_florence -2-CSDN博客文章浏览阅读1.1k次,点赞108次,收藏109次。Florence-2是由微软Azure AI团队开发的一款多功能、统一的视觉模型。它通过统一的提示处理不同的视觉任务,表现出色且优于许多大型模型。Florence-2的设计理念是…

IAR使用调试详解

目录 1 IAR功能介绍 1.1 File文件菜单 1.2 Edit编辑菜单 1.3 View视图菜单 1.4 Projcet工程菜单 1.5Debug调试菜单 1.6 Disassembly反汇编菜单 1.7 Simulator下载调试工具 1.8 Tools工具菜单 1.9 Window窗口菜单 1.10 Help帮助菜单 2 IAR设置 2.1 插入/编辑模板 2…

【优秀python算法毕设】基于python时间序列模型分析气温变化趋势的设计与实现

1 绪论 1.1 研究背景与意义 在气候变化日益受到全球关注的背景下&#xff0c;天气气温的变化已经对人们的生活各方面都产生了影响&#xff0c;人们在外出时大多都会在手机上看看天气如何&#xff0c;根据天气的变化来决定衣物的穿着和出行的安排。[1]如今手机能提供的信息已经…

mysql中You can’t specify target table for update in FROM clause错误

mysql中You can’t specify target table for update in FROM clause错误 You cannot update a table and select directly from the same table in a subquery. mysql官网中有这句话&#xff0c;我们不能在一个语句中先在子查询中从某张表查出一些值&#xff0c;再update这张表…