Vue dynamically adds animation @keyframes

Requirement:
When receiving a push, the element needs to be dynamically moved to a specific position based on the pushed x and y.

@keyframes written in :style='' cannot be recognized.

Finally using styleSheets to insert styles solved the problem.

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);
            })