关于前端:VUE中动态设置CSS3-animation动画属性不生效

39次阅读

共计 445 个字符,预计需要花费 2 分钟才能阅读完成。

想通过设置动静 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 增加下来

正文完
 0