vue 发展历程时间轴动画_Vue实现的，时间轴数据展示

最新推荐文章于 2024-09-04 16:56:59 发布

可说快请来肉了

最新推荐文章于 2024-09-04 16:56:59 发布

阅读量828

点赞数

文章标签： vue 发展历程时间轴动画

本文链接：https://blog.csdn.net/weixin_42352453/article/details/112943482

版权

这篇博客展示了如何利用Vue来创建一个时间轴动画，通过动态数据展示了一个灵活的过渡效果。文章中，作者首先定义了Flex布局的样式，然后在Vue实例中创建和计算数据，使用定时器实现平滑的数值变化。最后，通过调整Vue组件的状态来触发新的数据计算和动画过程，形成时间轴的滚动效果。

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

Document

.flex{

display: flex;

justify-content: space-between;

width: 880px;

height: 40px;

align-items: center;

}

.flex-1{

width: 40px;

}

.flex-2{

display: flex;

width: 800px;

align-items: center;

}

.flex-3{

width: 0;

height: 30px;

background: rgba(0, 0, 0, 0.6);

}

.flex-4{

width: 200px;

}

.flip-list-move {

transition: transform 10s;

}

.fade-enter-active, .fade-leave-active {transition: all .5s;}

.fade-leave-active {position: absolute;transform: translateY(30px);}

.fade-enter, .fade-leave-to {opacity: 0;}

.fade-move {transition: transform .3s;}

{ { key+

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

可说快请来肉了

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue图片时间轴滑动_Vue之时间轴组件

weixin_39984201的博客

12-22

2038

github地址：https://github.com/SunshineMibai/vue-timeline实现思路及步骤：页面分为四个部分1、左侧时间2、中间圆点3、右侧内容4、虚线部分最外层div,relative布局,方便子元素计算尺寸左侧时间固定宽度，显示时间(本demo:100px),之后absolute绝对定位(left:0)中间圆点absolute绝对定位,因为左侧宽度已经定为100...

拖拽时间轴

08-13

分享一个拖拽的时间轴代码，多多指点。　

参与评论您还未登录，请先登录后发表或查看评论

vue3 通过使用el-slider制作可自动播放并可以获取当前播放位置值的时间轴。

最新发布

weixin_47494533的博客

09-04

266

直接创建timeLine.vue 文件，将代码复制进去即可。（css引用的播放和切换按钮自行修改）传入的参数使用含义在上面的时间轴代码中有注释。

代码检视

04-15

NULL 博文链接：https://mwhgjava.iteye.com/blog/1752760

代码安全检视方法有_代码检视（Code Review）的几种实践

weixin_39695323的博客

12-23

1724

代码检视每个读次文章的人都会知道是什么意思。我们项目也是坚持在做代码检视。今天我们仔细深入看看代码检视的内涵及作用。这几年，我用过不同的代码检视工具，并且我相信有一套代码检视方法是最好的，下面是我所学到的。有三种代码检视的方法：● 无代码检视每个开发者自由的check in代码，且每个人都可以检查check in代码的功能清单，只要他愿意，没有责任与义务的区分。● 非阻塞式代码检视当代码check...

代码安全检视方法有哪些_补肾养生方法有哪些，这些方法安全有效

weixin_39776817的博客

12-29

随着当今生活水平的提高，大家对于养生的需求逐渐高涨起来，特别是对于男士来说，补肾就是最重要的一种养生。现今西医研制而成的壮阳药品种较繁多，但因为壮阳药市场鱼龙混杂，使得很多的使用者对于壮阳药和补肾药都存有疑虑。下面就来为大家介绍一下补肾养生方法有哪些，比那些激素调配的药物更安全有效。补肾养生方法有哪些1.猪腰杜仲汤【用料】猪腰二双，杜仲、核桃肉各一两。【制法】把全部用料洗净放入锅内，加清水适量，武...

代码安全检视方法有_代码在线检视，养成良好编程习惯

weixin_29602351的博客

01-08

302

HTML代码检视HTML代码在线检视网站规则配置如下：Standardtagname-lowercase 标签名必须小写attr-lowercase 属性小写attr-value-double-quotes 属性值双引号attr-value-not-empty 属性值不能为空attr-no-duplication 属性无重复attr-no-duplication <!DOCTYPE html...

代码安全检视方法有_安全检视的操作步骤及方法

weixin_42514654的博客

12-23

578

(1)前部及发动机1、牌照、灯具要求：完整无损；清晰有效；安装牢固。2、后视镜(完好、调整得当)3、散热器；无漏水，冷却水量充足4、润滑油：粘度正常、色清、无杂质(机油要求：①质量：色清、无杂质、粘度正常；②数量：在机油标尺刻度2/4-4/4间；5、高低线无松脱6、制动液液面高度正常7、蓄电池：清洁、无漏液、安装连接牢固。蓄电池要求：清洁、无漏液、安装连接牢固。液面高度高出极板10~15mm，通气...

vue 发展历程时间轴动画_Vue之时间轴组件

weixin_42663213的博客

01-14

1500

vue 发展历程时间轴动画_尤雨溪谈 Vue.js :缔造自由与真我 | 码云封面人物

weixin_39944146的博客

12-13

507

尤雨溪（Evan You） Vue.js作者尤雨溪（Evan You），前端框架 Vue.js 作者，独立开源开发者，现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的 JavaScript 项目，最后自己也走上了开源之路，现在全职开发和维护Vue.js。最初是什么动机促使了Vue 的产生？ ...

3种常用代码检查审核管理工具

03-09

三种常用代码审核管理工具安装包，跟大家分享！

Vue实现可移动水平时间轴

10-15

在Vue.js中实现一个可移动的水平时间轴是一项常见的需求，尤其在项目管理或数据分析的可视化应用中。本文将深入探讨如何使用Vue来创建这样一个功能丰富的组件。首先，我们需要了解时间轴的基本结构。一个水平时间...

vue图片时间轴滑动_Vue实现可移动水平时间轴

weixin_39880899的博客

12-22

1672

本文实例为大家分享了Vue实现可移动水平时间轴的具体代码，供大家参考，具体内容如下里程碑时间轴具体实现效果图编辑里程碑效果图编辑里程碑里程碑状态：开始超期关闭 {{'阶段名称：'+item.stageName}}{{'阶段目标：'+item.stageTarget}}{{'开始时间：'+item.startTime}}{{'结束时间：'+item.endTime}}{{'验收标准：'+i...

代码安全检视方法有_WeAP敏捷团队-点位训练法之开发编码

weixin_29061041的博客

12-23

468

一、代码检视禁止使用异常规范。抛出非预期异常，会coredump，且gdb无错误信息。YES:void KVMap::SetValue(const string& key, int value);NO :void KVMap::SetValue(const string& key, int value) throw CException;第三方库先用类简易封装，再使用，特别涉及资源...

Vue时间轴

热门推荐

听香水榭

09-16

1万+

上面是时间轴的呈现效果。有两种思路进行设计，第一种是时间线的长短跟时间点的位置跟数量都是动态生成的，但是我考虑到时间线的长短动态生成的话，时间点的位置可能不太好控制，尤其是最最后一个时间点跟时间线终点能否连接，加上屏幕大小的变化，还得控制整个时间轴的位置不动，着实有些头疼。然后采取了另外一种，将时间线的长度固定，时间点的数量动态生成，时间点的位置动态控制，这样还是蛮靠谱的，因为最后一个时间点是向...

测试查询代码三种方式

xiao祁的博客

08-08

951

selectList：查询多条语句返回list集合，如果没有查到任何数据返回一个空集合，不是null selectOne：查询单条数据返回一个对象，如果没有任何数据返回null selectMap：查询多条数据返回一个map集合，如果查不到返回空的map集合，不是null 1.加载mybatis核心配置文件 2.构建SqlSessionFactory 工厂对象 3.通过工厂打开sqlsession...

白盒测试之代码检查三种方式

software_test010的博客

08-03

1847

桌面检查是程序员对源程序代码进行分析、检验，并补充相关的文档，发现程序中错误的过程。由于程序员熟悉自己的程序，可以有程序员自己检查，这样可以节省很多时间，但要注意避免自己的主观判断。

vue实现公司发展历程水平时间轴分上下轴展示，实现一个demo

06-07

好的，以下是一个基于 Vue 实现公司发展历程水平时间轴分上下轴展示的 demo。首先，我们需要在 Vue 组件中定义一个数组，用于存储公司发展历程的时间和事件： ``` data() { return { events: [ { date: "2010年", title: "公司成立", description: "公司在北京成立，专注于互联网领域。" }, { date: "2012年", title: "推出产品A", description: "公司推出了第一款互联网产品A。" }, { date: "2014年", title: "推出产品B", description: "公司推出了第二款互联网产品B。" }, { date: "2016年", title: "公司扩张", description: "公司在上海设立分公司，进一步扩大业务。" }, { date: "2018年", title: "推出产品C", description: "公司推出了第三款互联网产品C。" }, { date: "2020年", title: "公司上市", description: "公司在A股上市，获得了更多的投资。" } ] } } ``` 然后，在模板中使用 v-for 循环渲染出时间轴上的每个事件，使用 CSS 样式实现上下轴的分别展示： ``` <template> <div class="timeline"> <div v-for="(event, index) in events" :key="index" :class="`event ${index % 2 === 0 ? 'top' : 'bottom'}`"> <div class="date">{{ event.date }}</div> <div class="marker"></div> <div class="content"> <div class="title">{{ event.title }}</div> <div class="description">{{ event.description }}</div> </div> </div> </div> </template> ``` 最后，我们需要在样式中定义时间轴上的样式，使其看起来像一个真正的时间轴。这里只提供一个简单的样式，您可以根据自己的需求进行修改： ``` .timeline { position: relative; height: 100px; margin: 50px 0; } .timeline .event { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; } .timeline .event.top { left: 0; width: 50%; padding-right: 50px; } .timeline .event.bottom { right: 0; width: 50%; padding-left: 50px; } .timeline .event .date { font-size: 16px; font-weight: bold; margin-right: 20px; } .timeline .event .marker { position: relative; width: 20px; height: 20px; border-radius: 50%; background-color: #ccc; } .timeline .event .marker::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: #fff; } .timeline .event .content { flex: 1; } .timeline .event .title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .timeline .event .description { font-size: 14px; } ``` 这就是一个简单的 Vue 实现公司发展历程水平时间轴分上下轴展示的 demo，您可以根据自己的需求进行修改和优化。