1

我正在尝试使用该window.matchmedia();方法在不同的断点触发不同的 GSAP 时间线。

我试图在这里整理一个简单的例子来解释我的想法：

const box = document.querySelector(".box");
const change = document.querySelector(".change");

const mqs = [
  window.matchMedia("(min-width: 600px)"),
  window.matchMedia("(min-width: 768px)"),
  window.matchMedia("(min-width: 1024px)")
];

const tl = gsap.timeline({
  paused: true;
});

if (mqs[0].matches) {
  tl.to(box, { backgroundColor: "green" });
} else if (mqs[1].matches) {
  tl.to(box, { backgroundColor: "pink" });
} else {
  tl.to(box, { backgroundColor: "black" });
}

function playTl() {
  tl.play();
}

change.addEventListener("click", playTl);

这个想法是让change按钮在每个断点内触发动画。但这种方法行不通。这有可能实现吗？

这里还有一个 Codepen：  https ://codepen.io/abbasarezoo/pen/94c0b1c73f770d36f1103f615ac3e917

4

0 回答 0