需求:
需要接收到推送时动态根据推送过来的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);
})