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

问题描述

我正在尝试使用 GreenSock F.L.I.P plugin 和 Vue.Js，但我偶然发现了一个问题

我正在尝试什么

我尝试使用 VueJs 中的数据属性而不是类切换来更改布局

示例/代码

但我不知道它是否可行，为什么我所做的没有

由于您无法将付费 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,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>

谁能解释一下为什么会这样？

解决方法

框架中的更改是异步完成的，因此更新可以一起批处理。因此，您需要等待 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"
  });        
});