Question

我有一个适用于其他组件的动画，但不适用于此组件。我试过static navigationOptions = () => ({ title: 'My App', headerTintColor: Colors.DarkBlue, headerStyle: { backgroundColor: 'red' }, headerLeft: <HeaderBarItem to='InfoScreen' title='App info' />, headerRight: <HeaderBarItem to='FeedbackScreen' title='Feedback' /> });也没有运气。该行只是在没有任何动画的情况下消失。

<transition-group>

这是CSS

<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>

我的代码出了什么问题？

Answer 1

您需要使用transition-group来使用v-for。如果您使用的是字符串模板，则还需要tag="tbody"属性。

如果您使用的是DOM模板，则需要使用<tbody name="card-animation" is="transition-group">。参考：https://github.com/vuejs/vue/issues/3907

例如： https://jsfiddle.net/2LLkene5/

Vue 2：转换不在组件上工作

1 个答案: