Vue3+Uni-App动态绑定animation-name失效问题求助

问题背景 #

基于Vue3和Uni-App开发项目时，已成功实现animation-duration的动态绑定，但尝试动态绑定animation-name时无法正常工作。

可正常运行的animation-duration绑定示例 #

<template>
    <view class="box" :class="{ box__move: steps > 0 }"> </view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const frameTime = 400 // 帧时间,单位ms
const steps = ref(0)
const animationDuration = computed(() => {
    return `${(steps.value * frameTime) / 1000}s`
})

setTimeout(() => {
    steps.value = 2
}, 2000)
</script>
<style scoped lang="scss">
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    &.box__move {
        animation: moveTo2Steps v-bind(animationDuration) ease forwards;
    }
}
@keyframes moveTo2Steps {
    0% {
        transform: translateX(10px) translateY(10px);
    }
    50% {
        transform: translateX(30px) translateY(30px);
    }
    75% {
        transform: translateX(40px) translateY(60px);
    }
    100% {
        transform: translateX(50px) translateY(120px);
    }
}
</style>

动态绑定animation-name后失效的代码示例 #

<template>
    <view class="box" :class="{ box__move: steps > 0 }"> </view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const frameTime = 400 // 帧时间,单位ms
const steps = ref(0)
const animationDuration = computed(() => {
    return `${(steps.value * frameTime) / 1000}s`
})

setTimeout(() => {
    steps.value = 2
}, 5000)

const animationName = computed(() => `moveTo${steps.value}Steps`)
</script>
<style scoped lang="scss">
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    &.box__move {
        animation: v-bind(animationName) v-bind(animationDuration) ease forwards;
    }
}
@keyframes moveTo2Steps {
    0% {
        transform: translateX(10px) translateY(10px);
    }
    50% {
        transform: translateX(30px) translateY(30px);
    }
    75% {
        transform: translateX(40px) translateY(60px);
    }
    100% {
        transform: translateX(50px) translateY(120px);
    }
}
</style>

项目环境 #

• Vue: ^3.2.33
• Sass: ^1.49.9
• Uni-App: 3.0.0-4020920240930001

预期效果 #

• animation-name能随steps值动态变化
• 动画能正常播放

当前问题 #

• animation-name未被动态应用，动画无法正常播放

已尝试操作 #

• 确认animationName计算属性返回值正确，但仍无法触发动画
• 单独使用v-bind(animationName)绑定animation-name属性，问题依旧

原因分析 #

1. Uni-App编译环境兼容性限制：Vue3的CSS v-bind本质是将JS变量转为CSS自定义属性，但Uni-App针对小程序等端的编译逻辑，对animation-name使用CSS变量的支持不完善，无法正确识别动态传入的关键帧名称。
2. Scoped样式的哈希处理：带scoped的样式中，@keyframes会被自动添加哈希后缀，动态绑定的名称无法匹配到带哈希的关键帧标识，导致动画无法关联。

解决方案 #

方案1：内联样式动态绑定完整animation属性 #

放弃在scoped样式中绑定，直接通过:style生成完整的动画字符串：

<template>
    <view 
        class="box" 
        :class="{ box__move: steps > 0 }"
        :style="animationStyle"
    > </view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const frameTime = 400 // 帧时间,单位ms
const steps = ref(0)
const animationDuration = computed(() => {
    return `${(steps.value * frameTime) / 1000}s`
})
const animationName = computed(() => `moveTo${steps.value}Steps`)
const animationStyle = computed(() => {
    return steps.value > 0 ? {
        animation: `${animationName.value} ${animationDuration.value} ease forwards`
    } : {}
})

setTimeout(() => {
    steps.value = 2
}, 5000)
</script>
<style scoped lang="scss">
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
@keyframes moveTo2Steps {
    0% {
        transform: translateX(10px) translateY(10px);
    }
    50% {
        transform: translateX(30px) translateY(30px);
    }
    75% {
        transform: translateX(40px) translateY(60px);
    }
    100% {
        transform: translateX(50px) translateY(120px);
    }
}
</style>

方案2：全局关键帧配合无scoped样式 #

将关键帧放在全局样式文件中（或移除组件样式的scoped），避免哈希后缀影响名称匹配：

// 全局样式文件（如global.scss）
@keyframes moveTo2Steps {
    0% {
        transform: translateX(10px) translateY(10px);
    }
    50% {
        transform: translateX(30px) translateY(30px);
    }
    75% {
        transform: translateX(40px) translateY(60px);
    }
    100% {
        transform: translateX(50px) translateY(120px);
    }
}

组件样式修改：

<style lang="scss">
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    &.box__move {
        animation: v-bind(animationName) v-bind(animationDuration) ease forwards;
    }
}
</style>

方案3：动态切换类名 #

预先定义不同关键帧对应的类，通过:class动态切换：

<template>
    <view 
        class="box" 
        :class="getAnimationClass"
    > </view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const frameTime = 400 // 帧时间,单位ms
const steps = ref(0)
const animationDuration = computed(() => {
    return `${(steps.value * frameTime) / 1000}s`
})
const getAnimationClass = computed(() => {
    return steps.value > 0 ? `box__move--${steps.value}steps` : ''
})

setTimeout(() => {
    steps.value = 2
}, 5000)
</script>
<style scoped lang="scss">
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.box__move--2steps {
    animation: moveTo2Steps v-bind(animationDuration) ease forwards;
}
@keyframes moveTo2Steps {
    0% {
        transform: translateX(10px) translateY(10px);
    }
    50% {
        transform: translateX(30px) translateY(30px);
    }
    75% {
        transform: translateX(40px) translateY(60px);
    }
    100% {
        transform: translateX(50px) translateY(120px);
    }
}
</style>

内容的提问来源于stack exchange，提问作者DX D