Can't use data property to Trigger gsap F.L.I.P change

[Charles Lavalard]

I'm playing around with the GreenSock F.L.I.P plugin and Vue.Js and i stumble on an issue

 

I tried changing the layout with a data property in VueJs instead of a class toggle

 

But I don't know if it could works and why what I have done doesn't

Could someone explain why is it so ?

See the Pen MWpxEXm by FreeStab (@FreeStab) on CodePen.

[OSUblake]

Hi Charles!

 

Changes in frameworks are done asynchronously so updates can get batched together. So you need to wait for the DOM to render those changes.

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"
  });        
});

 

[Charles Lavalard]

Awesome ! Thank you so much ?