Fatal编程技术网
  • vue.js/
  • Vue.js Vue 2:转换不在组件上工作

Vue.js Vue 2:转换不在组件上工作

vue.js vuejs2

Vue.js Vue 2:转换不在组件上工作,vue.js,vuejs2,transition,Vue.js,Vuejs2,Transition,我有一个可以在其他组件上工作的动画，但不能在这个组件上工作。我尝试了，但也没有成功。该行将在没有任何动画的情况下消失 <transition name="card-animation"> <tr is="employee-row" v-for="employee in employees" :employee="employee" :selectedOffice='selectedOffice' :n

我有一个可以在其他组件上工作的动画，但不能在这个组件上工作。我尝试了
，但也没有成功。该行将在没有任何动画的情况下消失

<transition name="card-animation">
    <tr is="employee-row" 
        v-for="employee in employees" 
        :employee="employee" 
        :selectedOffice='selectedOffice'
        :new_hire_location_options="new_hire_location_options"
        v-on:fire='fireEmployee(employee)'
        v-if="(employee.location.name == selectedOffice || selectedOffice == 'show all')">
    </tr>
</transition>
我的代码有什么问题？

您需要使用
转换组
来处理
v-for
。如果您使用的是字符串模板，那么还需要
tag=“tbody”
属性

如果您使用的是DOM模板，则需要使用
。参考：

例如：

如问题中所述，我尝试了
，但没有成功，但您是否也使用了
tag=“tbody”
属性？您必须使用“过渡组”来设置列表更改的动画，没有其他方法。到哪个元素<代码>
或转换组<代码>仍然没有动画。我认为问题在于每个
都是
员工行的组成部分，我正在遍历
员工
，并将每个
指定为
员工行
，同时尝试设置动画。我的问题是使用
is
关键字是正确显示的唯一方法

.card-animation-enter-active, .card-animation-leave-active {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.card-animation-enter, .card-animation-leave-to {
    transform: scale(0);
    opacity: 0;
}