VUE中动态设置CSS3|VUE中动态设置CSS3 animation动画属性不生效
想通过设置动态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
this.$refs.box.style.animation = 'add-bezier 1s'【VUE中动态设置CSS3|VUE中动态设置CSS3 animation动画属性不生效】通过ref直接操作dom，将animation添加上去
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募