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

xiongmao86
  • 44

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

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

评论
阅读 383
4 个回答
✓ 已被采纳

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

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

vue的transition需要配合v-ifv-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>

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

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

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

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏