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

【问题标题】：Can't use Vue.js data property to Trigger gsap F.L.I.P change无法使用 Vue.js 数据属性来触发 gsap F.L.I.P 更改
【发布时间】：2021-09-03 04:29:27
【问题描述】：

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

我正在尝试什么

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

示例/代码

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

由于您无法将付费 greenSock 插件添加到 Stack Overflow sn-p 中，因此我制作了一个代码笔来向您显示错误：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>

有人能解释一下为什么会这样吗？

【问题讨论】：

标签： javascript css vue.js gsap flip

【解决方案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"
  });        
});

【讨论】：