vue中使用animate的一些问题

Question

重现在此:
jsfiddle

主要问题是: 渲染的条目在移除的时候,不是在原地移除,而是在移动到最后一列之后再移除.这样就影响了效果了,请问是我哪里做的不对么?请指教

Answer 1

你用transition-group这个组件包裹起来，就可以实现在原地移除

        <transition-group
            name="custom-classes-transition" 
            enter-active-class="animated fadeInUp" 
            leave-active-class="animated fadeOut">
            <template v-for="item in list">
                <div v-bind:key="item">
                    <span>{{ item.value }}</span>
                    <span>
                            <button type="text" @click="remove(item)">remove</button>
                         </span>
                </div>
            </template>
        </transition-group>`

你可以看下官方文档https://vuefe.cn/v2/guide/tra...列表过渡。