无法使用 Vue.js 数据 属性 触发 gsap F.L.I.P 更改

Question

我正在研究 GreenSock F.L.I.P plugin 和 Vue.Js，我偶然发现了一个问题

我正在尝试什么

我尝试在 VueJs 中使用数据 属性 而不是 class 切换

来更改布局

示例/代码

但我不知道它是否可行，为什么我所做的不起作用

由于您无法将付费 greenSock 插件添加到 Stack Overflow 片段中，因此我制作了一个代码笔来向您显示错误：https://codepen.io/FreeStab/pen/MWpxEXm

这是工作代码

changeLayout() {
 //this one works FINE
 const state = Flip.getState(".flex, .bloc"); 
 document.querySelector(".flex").classList.toggle("change");

  Flip.from(state, {
    absolute: true,
    duration: 0.5,
    stagger: 0.1,
    ease: "power1.inOut"
  });
}

但是当我尝试使用代表状态的数据 属性 更改布局时它不起作用

 changeLayoutWithData() {
  //this one Doesn't works
  const state = Flip.getState(".flex2, .bloc");

  this.flexClass = !this.flexClass;

  Flip.from(state, {
    absolute: true,
    duration: 0.5,
    stagger: 0.05,
    ease: "power1.inOut"
  });
}

我的模板就像

  <div id="app">
    <h1>Click on elements to animate</h1>
    <h2>This works</h2>
    <div class="flex" @click="changeLayout">
      <div class="bloc">1</div>
      <div class="bloc">2</div>
      <div class="bloc">3</div>
    </div>
    <h2>This doesn't</h2>
    <div
      class="flex2"
      :class="{ change: flexClass }"
      @click="changeLayoutWithData"
    >
      <div class="bloc">1</div>
      <div class="bloc">2</div>
      <div class="bloc">3</div>
    </div>
  </div>

有人可以解释为什么会这样吗？

Answer 1

框架中的更改是异步完成的，因此更新可以一起批处理。因此，您需要等待 DOM 呈现这些更改。

https://vuejsdevelopers.com/2019/01/22/vue-what-is-next-tick/

this.flexClass = !this.flexClass;

this.$nextTick(() => {
  Flip.from(state, {
    absolute: true,
    duration: 0.5,
    stagger: 0.05,
    ease: "power1.inOut"
  });        
});