柱状图动态生成向上增长遇到的问题
1.一开始做的时候遇到的第一个问题就是如何动态生成高度不同的每一项。
因为用的是vue,首先用了v-for来渲染。然后因为每一项都不相同,就使用了v-bind来控制样式,传入名称和高度,这样就区分开了每一项。
2.生成之后想加一个每一项都从底部慢慢向上生长的动画特效。第一个想到的就是用渲染来实现。看了一下相关内容后发现渲染要通过hover,click等方式触发才行。这个时候也没多想,直接切换到了动画,动画是自动开始的。且普通动画只开始一次,符合想要的效果。
3.但是动画只有一个,因为每一项的class都是相同的,所以如果用动画的话,高度就区分不出来。这个时候就想到能不能再keyframe中引入外部的变量,和vue中的计算属性一样。后来发现不行。
4.最后想到如果可以在函数中取到keyframe的值,函数绑定在添加按钮上,每一次添加都修改当前keyframe中预设的高度。通过查找发现可以通过document.styleSheets来获取当前页面所有的样式。
5.使用document.styleSheets[5].cssRules[3].cssRules[1].cssText获取到了需要修改的样式,那个时候第一想法是用直接赋值法修改,document.styleSheets[5].cssRules[3].cssRules[1].cssText=“ ”
但是没用,后来用replace来修改,也没有用。后来发现有自带的3个方法
deleteRule
findRule
insertRule
但是没发现修改选项,就想先删除,再插入。然后删除了之后,随手点了一下按钮居然有用了。 - -
最后感觉应该是删除了100%,动画不知道终点在哪,就把传入的高度当做了最终帧来用了。
想想最后还是不小心弄出来的,蛮扎心的。
- 使用php动态生成gif时遇到的问题和解决办法
- js 动态生成HTML,并加载事件遇到的问题
- 关于动态生成DropDownList遇到的问题
- java调用c++生成的动态和静态库时遇到的问题
- “对于不返回任何键列信息的 SelectCommand 不支持 UpdateCommand 的动态 SQL 生成”问题的解决
- 动态生成页面返回数据的问题--十万火急!
- Kolakoski序列生成遇到的问题及调试过程
- struts2.3.16.3升级遇到无法动态访问action的方法的问题。
- 经常用到的交叉表问题,一般用动态SQL能生成动态列!
- mybatis generator配置详解及遇到生成代码重复问题
- 自己动手做动态网站并发布遇到的问题(写给刚接触动态网站的初学者)
- 自动生成ID遇到的一些问题
- LISTCTRL上一列动态生成进度条的郁闷问题
- Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
- MSSQL2000的官方JDBC在应用动态代理机制遇到的异常问题解决
- JS动态生成界面中存在的问题!
- JSP调用JavaBean在网页上动态生成柱状图
- layui laydate 渲染失效问题,lay-key导致动态生成代码二次渲染失败
- (转)sqlite3生成lib遇到的问题
- Eclipse 生成Android项目javadoc遇到的问题