想通过设置动静style的形式设置设置animation属性,发现动静设置的animation动画没有通过Vue本人的编译(可能)
在class中定义的animation是有哈希的
间接通过style设置的animation是没有哈希的
解决方案一
删除scoped,不举荐,会净化全局
解决方案二
this.dymanicStyle = `@keyframes add-bezier { from {transform: translateX(0px)} to {transform: translateX(280px)}}`let sheet = document.styleSheets[0]sheet.insertRule(this.dymanicStyle, 0)
在styleSheets中退出@keyframes
<div class="box" ref="box"></div>this.$refs.box.style.animation = 'add-bezier 1s'
通过ref间接操作dom,将animation增加下来