Блог

Я играю с плагином GreenSock F. L. I. P и Vue.Js и я натыкаемся на проблему

Что я пытаюсь

Я попытался изменить макет с помощью свойства данных в VueJS вместо переключения класса

Пример/ Код

Но я не знаю, может ли это сработать и почему то, что я сделал, не работает

Поскольку вы не можете добавить платные плагины GreenSock в фрагмент переполнения стека, я сделал кодовую строку, чтобы показать вам ошибку: 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>
 

Может кто — нибудь объяснить, почему это так ?

Изменения в фреймворках выполняются асинхронно, поэтому обновления могут собираться вместе. Поэтому вам нужно дождаться, пока 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"
  });        
});