javascript - 使用 GreenSock (GSAP) 的 float 输入标签

Question

我正在尝试使用 GreenSock 创建 float 输入标签。如果输入字段有值，我希望能够将标签保留在顶部，如果没有，则将标签返回原位。

现在，动画仅在一个输入元素上运行一次。需要帮助弄清楚如何对每个输入执行此操作。

// SETUP
const tl = new TimelineMax();
const container = $(".input-container");

// CLICK EVENT
container.on("click", function() {

  // VARIABLES
  const label = $(this).find(".label");


  // TWEEN
  tl.to(label, 0.35, {left: "5", top: "1", transform: "scale(.75)", color: "#333"});  

});

// FOCUSOUT EVENT
container.on("focusout", function() {

  const input = $(this).find(".input");
  if (input.val() === "") {
    tl.reverse();
  }

});

这是我到目前为止所拥有的:[演示链接] 1

Answer 1

问题是，您对所有标签使用相同的 TimelineMax 对象。每个输入/容器都需要自己的时间轴。

您也许可以将 Timeline 实例直接附加到 DOM，如下所示:

// SETUP
const container = $(".input-container");

// CLICK EVENT
container.on("click", function() {

  // VARIABLES
  const label = $(this).find(".label");

  this.tl = new TimelineMax();
  // TWEEN
  this.tl.to(label, 0.35, {left: "5", top: "1", transform: "scale(.75)", color: "#333"});  

});

// FOCUSOUT EVENT
container.on("focusout", function() {

  const input = $(this).find(".input");
  if (input.val() === "") {
    this.tl.reverse();
  }

});

Updated CodePen