在Vue.js中如何绑定transition及transition-group的name属性？

是可以动态绑定name属性的，你当前的写法存在问题：
transition和transition-group的name属性只接受字符串类型的值，你现在用的对象语法是动态绑定class的写法，不适用在name属性上。

正确实现方式 #

场景1：两套动画切换 #

如果需要根据isActive的状态决定是否启用transactionAnimation动画，直接用三元表达式返回对应字符串即可：

<transition-group
   :name="isActive ? 'transactionAnimation' : ''"
   tag="tbody"
   class="list-group"
>
<!-- 列表项代码 -->
</transition-group>

如果不需要启用动画时要使用另一套动画，把三元表达式的空字符串替换为对应的动画名字符串即可。

场景2：多套动画自由切换 #

如果可选动画超过2套，可以直接绑定一个响应式变量：

<!-- 模板部分 -->
<transition-group
   :name="activeAnimName"
   tag="tbody"
   class="list-group"
>
<!-- 列表项代码 -->
</transition-group>

// 逻辑部分示例（Vue3组合式API）
import { ref } from 'vue'
// 可选值可以是 'fade'、'slide'、'transactionAnimation'等任意你定义的动画名
const activeAnimName = ref('transactionAnimation')

后续只要修改activeAnimName的值，就会自动切换对应的过渡动画。

注意事项 #

• 绑定的动画名对应的CSS过渡类必须存在，比如动画名为transactionAnimation时，需要配套定义.transactionAnimation-enter-from、.transactionAnimation-enter-active、.transactionAnimation-leave-to、.transactionAnimation-leave-active等标准过渡类的样式，动画才能正常生效。
• 如果给name绑定空字符串，Vue会自动使用默认的v-前缀的过渡类。

内容的提问来源于stack exchange，提问作者Mavlonov Oybek