javascript - 当另一个对象聚焦时为一个对象设置动画

Question

我有一个表单的多个部分。每个部分都有一个指示器，指示用户正在进行的步骤。我想要它，以便每当一个部分中的输入被聚焦时，它就会在指示器上开始一个动画。我无法使用 :focus-within 因为它现在不是浏览器标准。

现在我已将脉冲动画保存为悬停效果，但我希望此动画在输入聚焦时开始。我考虑过使用 JQuery，但我自己想不出来。

如有任何帮助，我们将不胜感激。

@keyframes pulse {
  0%,
  40% {
    box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
  }
  0% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
  }
}

#indicator {
  background-color: #006da8;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  padding: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

#indicator:hover {
  animation: pulse 2s ease infinite;
}

#indicator p {
  padding-top: 3px;
  margin: 5px;
  color: white;
  text-align: center;
}

input {
  display: block;
  margin: 10px 0 10px 0;
}


/* what i think i want to do? */

input:focus {
  /* somehow start indicator animation???
     Maybe use javascript? */
}

<form>

  <section>
    <div id="indicator">
      <p>1</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

  <section>
    <div id="indicator">
      <p>2</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

  <section>
    <div id="indicator">
      <p>3</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

</form>

Answer 1

将每个部分转换为 flexbox。将 .indicator 放置在输入之后，并使用 order: -1 将其移动到顶部。现在您可以使用兄弟组合器 input:focus~.indicator 来调用动画。

@keyframes pulse {
  0%,
  40% {
    box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
  }
  0% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
  }
}

section {
  display: flex;
  flex-direction: column;
  width: 50vw;
}

section .indicator {
  order: -1;
}

.indicator {
  background-color: #006da8;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  margin-top: 15px;
  margin-bottom: 15px;
  color: white;
  text-align: center;
}

input {
  display: block;
  margin: 10px 0 10px 0;
}

input:focus~.indicator {
  animation: pulse 2s ease infinite;
}

<form>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">1</div>
  </section>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">2</div>
  </section>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">3</div>
  </section>

</form>