Flip.from() 触发 onLeave() 而 <div> 仍然存在

Question

概览

目标

单击另一个项目时使用 GSAP Flip 动画 div._selected。

问题

点击一个项目 可以正确选择它，但没有动画。原因是它认为div._selected离开了DOM。它在那里，但在一个新的位置。

顺便说一句，当 List.vue 数据更改时，动画可以正常工作。

上下文

Places.vue

<template>
  <list>
    <list-item
      class="place"
      v-for="place in places"
      :key="place.id"
      @click="selectPlace(place)"
      :selected="place.id === $store.state.places.selected_record_id">
      
      <div class="name">{{ place.name }}</div>

    </list-item>
  </list>
</template>

<script>
export default {
  name: 'places-page',

  methods: {
    selectRecord ({ id }) {
      this.selected_record = id;
    }
  }
}
</script>

ListItem.vue

<template>
  <li class="_item" @click="$emit('click')">
    
    <slot></slot>

    <!-- This is what moves around -->
    <div class="_selected"
      data-flip-id="selected"
      v-if="selected">
    </div>
  </li>
</template>

<script>
export default {
  name: 'list-item',

  props: {
    selected: { type: Boolean, default: false }
  }
}
</script>

List.vue

<template>
  <ul class="list-control">
    <slot></slot>
  </ul>
</template>

<script>
export default {
  name: 'list-control',

  data () {
    return {
      state: null
    };
  },

  beforeUpdate () {
    this.$data.state = Flip.getState(gsap.utils.toArray('.list-control [data-flip-id]'));
  },

  updated () {
    Flip.from(this.$data.state, {
      duration: 0.8,
      ease: 'expo.out',
      simple: true,
      nested: true,
      onEnter: elements => {
        console.log('*** onEnter', elements);
      },
      // When clicking on an item, this thinks that `div._selected`
      // has left the DOM and didn’t come back. Seems like
      // a race condition, but unsure how to proceed since the DOM
      // should be fully `updated` at this point
      onLeave: elements => {
        console.log('*** onLeave', elements);
      }
    });
  }
}
</script>

Answer 1

需要添加targets: gsap.utils.toArray('.list-control [data-flip-id]')。所以：

Flip.from(this.$data.state, {
  // ...
  targets: gsap.utils.toArray('.list-control [data-flip-id]'),
  // ...
});

Flip.from() 触发 onLeave() 而 <div> 仍然存在

Flip.from() triggers onLeave() while <div> is still present

vue.js

gsap

nuxt.js

概览

上下文