vue动态添加动画@keyframes

需求：
需要接收到推送时动态根据推送过来的x,y将元素移动到具体位置。

:style=''中写@keyframes不能被识别到。

最终使用styleSheets插入样式来解决该问题。

let objIdx='234888'
let dymanicStyle = `@keyframes add-mapframes${objIdx}{
                  from {
                    transform:  translate(0px,0px);
                  }
                  to {
                    transform:  translate(${ x + 'px'},${y + 'px'});
                }}`

            let sheet = document.styleSheets[0]
            let position = sheet.insertRule(dymanicStyle, 0) //会返回添加的位置
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$refs[objIdx][0].style.animation = `add-mapframes${objIdx} 3s`
                    //清除动画和添加的样式
                    setTimeout(() => { 
                        this.$refs[objIdx + `Ref`][0].style.animation = ``
                        sheet.deleteRule(position) //删除sheet样式表中添加的样式
                    }, 3000);
                }, 200);
            })