[Vue][CSS动画]柱状图实现输入数值动态生成新的项（向上生长）

最新推荐文章于 2024-07-18 13:56:07 发布

三十二年蝉

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量1.1k

点赞数

分类专栏：技术文章标签： CSS动画 vue 动态生成图表

本文链接：https://blog.csdn.net/q476584989/article/details/84791504

版权

本文介绍了一个使用Vue和CSS动画实现的功能：根据输入的名称和数值动态生成自底向上生长的柱状图。通过动态修改@keyframes属性，每次新增项时删除上一个项的动画最高点，从而实现新项的高度变化。关键代码包括HTML、JS和CSS的交互，利用document.styleSheets和CSSKeyframesRule进行操作。

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

界面
在这里插入图片描述
主要功能：输入项的名称和数值，点击新增按钮，生成新的项，自底向上生长。使用CSS3动画属性。

要点：动态修改@keyframes中的属性

代码（只展示关键代码）：
HTML

<div class="item" v-for="(item,index) in items" :style="{
      height:item.height+'px',marginTop:400-item.height+'px'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

三十二年蝉

关注关注

0
点赞
踩
3

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css3动态增长柱形图

11-04

css3动态展示柱形图增长效果，兼容不同尺寸屏幕

vue实现一个动效柱状图

weixin_33881041的博客

08-04

811

接手了一个需求的时候，其中有个 UI图是这样的：按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码把这张...

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

使用 Vue 和 ECharts 打造动态数据可视化图表

最新发布

liyananweb的博客

07-18

1559

通过本文，我们了解了如何使用 Vue 和 ECharts 来创建一个简单的柱状图，并实现了动态数据更新。Vue 的响应式数据绑定和 ECharts 的强大图表功能相结合，使得我们可以轻松地构建出功能强大且美观的数据可视化应用。希望这篇文章对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。百万大学生都在用的AI论文写作工具，篇篇无重复👉:AI论文写作。

从下往上增加的柱状图生成动画(适用于统计类应用)

iOS界@迷糊小书童

06-17

3106

我们在一些统计,li'cai

css3如何向上_css3动画从底部向上升

weixin_42520580的博客

12-23

942

animation-fill-mode: forwards;/*当动画完成时，动画会停留在最后一帧。*/升起来前升起来后 Titlebody,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}body{font:14px"微软雅黑","Arial ...

柱状图动态生成向上增长遇到的问题

q476584989的博客

12-04

777

1.一开始做的时候遇到的第一个问题就是如何动态生成高度不同的每一项。因为用的是vue，首先用了v-for来渲染。然后因为每一项都不相同，就使用了v-bind来控制样式，传入名称和高度，这样就区分开了每一项。 2.生成之后想加一个每一项都从底部慢慢向上生长的动画特效。第一个想到的就是用渲染来实现。看了一下相关内容后发现渲染要通过hover，click等方式触发才行。这个时候也没多想，直接切换到了动...

vue+echarts 实现进度条式柱状图 根据不同的数值展示不同的颜色并实现滚动

qq_32332433的博客

01-12

1808

实现效果：注意：实际数据要通过一些操作才能展示到最右边详见代码 <template> <div style="width: 100%; height: 86%"> <div class="legend-top"> <div><span class="danger"></span>危险4家</div> <div><span class="pass"></sp

vue中使用柱状图

weixin_61032994的博客

04-24

6401

主要是为了记录以下内容 1.更改柱子宽度：barWidth属性 2.设置柱子颜色为渐变色：itemStyle属性 3.x轴的样式：axisLine属性 4.刻度上字体的样式及间距等：axisLabel里的lineStyle属性 5.去掉与x轴平行的分割线：splitLine的show属性 6.去掉y轴刻度线效果图如下代码如下： <template> <div class="psgBarChart" ref="psgBarChart"></div> </te

Vue中用CSS翻转动画的实现

江夏、的博客

08-06

3540

今天女朋友给我提了个需求，一张图片实现鼠标滑过翻转到背面是介绍图片的内容，代码如下 <template> <div class="Demo"> <div class="Before" ></div> <div class="After" style="font-size:20px;color:black">这个是...

13 使用Vue + FormData + axios实现图片上传功能实战

热门推荐

xingyu_qie的专栏

06-21

1万+

文本通过Vue实例项目，使用axios + FormData实现图片上传做为例子，为下一节图书信息上传做准备

JavaScript实现的DOM绘制柱状图效果示例|angluo-javascript-236773.pdf

10-18

主要介绍了JavaScript实现的DOM绘制柱状图效果,涉及javascript数值计算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

JS封装动态柱形图

V_雨落的博客

12-13

1551

首先看一下效果图代码如下： <body> <div id="container"></div> </body> <script src="../../../js/jrChart.js"></script> <script> var obj = {

html怎么给按钮加信号,css3实现wifi信号逐渐增强效果实例

weixin_36128239的博客

07-02

378

整理文档，搜刮出一个css3实现wifi信号逐渐增强效果实例的代码，稍微整理精简一下做下分享。效果图下面是实现代码：wifi信号*{margin: 0;padding: 0;}.box {width: 240px;height: 240px;box-sizing: border-box;position: relative;margin: 100px auto;}.wifi-symbol {wid...

根据输入数据渲染生成柱形图页面案例

weixin_52119040的博客

07-24

435

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

html柱状图代码效果不出来,动态生成柱状图-js动态化.html

weixin_36387422的博客

06-03

347

Document* {margin: 0;padding: 0;}.box {width: 1200px;height: 200px;border: 1px solid green;margin: 100px auto;position: relative;}.son {position: absolute;bottom: 0px;}// 1. 不管如何动态化：大div有1个(父盒子)docume...

d3.js学习笔记（四）-----更新后的柱状图（更新、过渡和动画）

MARTIAN的博客

02-04

800

d3学习之更新、过渡、动画和序数比例尺一、序数比例尺以一定的顺序（从左到右）展示，且均匀分布序数比例尺的输入值域通常是要指定一个包含类别名的数组，没有明确的类别时，可以给每个数据点或者条形分配一个对应其在数据集中位置的id值连续生成数值数组的方法：d3.range（） eg：d3.range（10）生成数组：[0,1,2,3,4,5,6,7,8,9] .rangeRound([0,w]) 根据输入值域的长度会自动分档，切分成相等的“块” .paddingInner(0.05) 设置档间距， 0.0

JavaScript入门第十一章（练习--动态生成柱状图）

m0_56344602的博客

08-04

917

需求：允许用户输入要生成的柱状图数量随机生成柱状图的每个柱子的高度代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</.

css3 手机信号,css3实现wifi信号逐渐增强效果

weixin_29058331的博客

08-04

399

效果图image.png下面是实现代码：wifi信号*{margin: 0;padding: 0;}.box {width: 240px;height: 240px;box-sizing: border-box;position: relative;margin: 100px auto;}.wifi-symbol {width: 200px;height: 200px;margin-left: 1...

Vue过渡动画详解：CSS实现与技巧

"Vue过度动画效果的实现方法和细节解析" 在Vue.js中，过渡动画是一种增强用户体验的重要手段，尤其在元素动态出现、消失或改变状态时。Vue提供了内置的`<transition>`组件来帮助开发者轻松实现这些效果。本文将详细...