将一个子组件从父组件中删除，并添加到另一个父组件，这个操作可以做成移动动画吗？

Question

我在做一个国际象棋组件，用square表示棋盘上的位置，棋子是一个img位于square组件里面，我想要支持点击操作，点了棋子后再点目标格子，我希望能做出移动动画将棋子移动到目标格，这个可以用css来实现吗？transition属性好像不支持，vue有一个transition组件，但是我不太了解能不能做。

p.s. 我是觉得这个不像是少见的需求，想问问有没有已经有的通用做法。

Answer 1

了解一下FLIP概念.
具体实现可以这样.

1. 删除前记录子组件位置.
2. 删除子元素
3. 添加到新的父元素中
4. 获取当前位置,与记录位置计算获得偏移值.
5. 将元素偏移,比如transform移动到上一个位置
6. 设置元素的transition,重置transform.这个过程就能产生动画.

Answer 2

vue的transition需要配合v-if或v-show使用；

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity .5s; }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
</style>

Answer 3

分成2层：一层 棋盘，一层 棋子
这样就不需要 从一个组件移动到另一个组件，只需要修改 位置

Answer 4

现在我的想法是单独弄一层做动画用，位置直接从组件获得，这样不用计算所有的棋子位置，只需要一个棋子就够了。@Fractal和@redbuck都对这个想法有帮助，由于@redbuck的说法更细致，对我帮助更大一点，我就采纳@redbuck的回答。谢谢 @redbuck @Fractal @凯迪Wen .

我搞错了，直接按redbuck说的做更简单。