如何解决无法使用 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"
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。