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

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%,动画不知道终点在哪，就把传入的高度当做了最终帧来用了。
想想最后还是不小心弄出来的，蛮扎心的。