当前位置: 首页 > Web前端 > HTML

在VUE中动态设置CSS3动画动画属性不生效

时间:2023-03-28 17:13:38 HTML

本想通过设置动态样式来设置动画属性,但是发现动态设置的动画动画还没有被Vue自己编译(可能是)中定义的动画class有hash直接通过style设置动画是没有hash的解决方案。1.删??除scoped,不推荐,会污染全局解决方案。2.this.dymanicStyle=`@keyframesadd-bezier{from{transform:translateX(0px)}to{transform:translateX(280px)}}`letsheet=document.styleSheets[0]sheet.insertRule(this.dymanicStyle,0)在styleSheets中添加@keyframes

this.$refs.box.style.animation='add-bezier1s'通过ref直接操作dom,并添加动画对它