使用 GreenSock (GSAP) 的浮动输入标签

Question

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

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

// 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();
  }

});

这是我到目前为止的内容：[演示 Link]1

Answer 1

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

您或许可以像这样将时间轴实例直接附加到 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

使用 GreenSock (GSAP) 的浮动输入标签

Floating Input Labels Using GreenSock (GSAP)

javascript

jquery

animation

gsap