HTML/CSS 中的按钮动画答案

【问题标题】：Button Animation in HTML/CSSHTML/CSS 中的按钮动画
【发布时间】：2022-01-26 01:13:54
【问题描述】：

我有以下代码。我想解决两件事：

当您点击提交按钮时，您会看到颜色突然变化，我该如何消除？它看起来像一个有问题的动画。点击提交按钮后，您会看到突然的颜色变为黄色或白色。
当您单击提交按钮并播放动画时，我希望带有圆形背景的复选标记显示在左侧，或者在按钮所在的同一位置。现在，复选标记和圆圈更靠右显示，但我怎样才能让它们显示在按钮所在的相同位置？

有什么建议吗？谢谢

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    backgroundColor: "#D3D3D3",
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 100px;
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              </div>
              <div class="progress-bar"></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

更新

提交按钮后，联系表单底部附近的对齐方式关闭，我该如何解决？

我的输出：

预期输出：

【问题讨论】：

除了这些问题之外，您的 HTML 还存在一些问题（您可以在 sn-p 编辑器的语法高亮显示中看到），并且您还包含 3 次 jQuery，有 2 个不同的版本。改为添加对 3.6.0 的单个引用
@RoryMcCrossan，HTML 中的哪个区域导致了语法高亮问题？我似乎找不到它
请参阅minimal reproducible example。请仅包含与问题相关并演示问题的 html/js/css。在许多情况下，将您的 css 缩减为仅相关 css 的过程可能会为您自己提供答案。
其他提示：float: center 不是一个东西，通常浮动作为布局策略已经过时。脚本元素应放置在 HTML 之后以获得最佳加载体验。
我尝试实施建议，但仍然遇到语法高亮问题

标签： javascript html jquery css animation

【解决方案1】：

我玩了一点你的动画...

关于突然的颜色变化，我在转换发生之前将其更改（按钮到进度条）。现在看起来更顺畅了，IMO。
关于最终位置，我将svg 的CSS 规则更改为left 属性，并在.progress-bar 最后一个动画步骤中添加了left: 26。

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 100,
    backgroundColor: "#D3D3D3", // Change the color here.
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    //backgroundColor: "#D3D3D3", // Not here!
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb",
    left: 26  // Added to position at the left, aligned with the rest
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    //complete: () =>
      //setTimeout(() => $('#my-form').submit(), 100) // Commented just to see the result longer...
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 20px; /* For the button vertical alignement */
  width: 100%;
  position: relative;
  margin-top: 0.9em;  /* For the button vertical alignement */
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 26px; /* CHANGED - was 100px */
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
  </script>
  <!--/script-->
  <!--script src="http://code.jquery.com/jquery-1.11.3.min.js">
  </script-->
  <!--link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"-->
  <!--script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <!-- start contact section -->
  <section id="contact">
    <div class="container" data-aos="fade-up">
      <div class="contactform">
        <div style="text-align:center">
          <div class="section-title">
            <h2>
              <br/>Get In Touch
            </h2>
          </div>
          <p>Feel Free To Reach Out To Me Through This Form! </p>
        </div>
        <div class="row">
          <div class="column">
            <form name="myform" action="#" id="my-form" method="POST" novalidate>
              <label for="firstname">First Name</label>
              <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
              <label for="lastname">Last Name</label>
              <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" placeholder="Your Email.." required>
              <label for="subject">Subject</label>
              <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
              <div class='buttonWrapper'>
                <div class="button">
                  <div class="text">Submit</div>
                </div>
                <div class="progress-bar"></div>
                <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->
  <script src="script.js"></script>
</body>

</html>

【讨论】：

谢谢！这行得通！我还有一个小要求，你能看看我在update下的更新帖子吗？我似乎无法弄清楚这部分
我不明白什么是错位...
我用清晰的图像编辑了帖子。请看一下
我对 CSS 进行了修改。寻找.buttonWrapper 和.button。
hmm 那么有没有办法让上边距和以前一样，但下边距是唯一改变的？因为现在，一切似乎都在坚持

【解决方案2】：

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1,
    background: "#FFFFFF",
  })
  .add({
    targets: ".button",
    duration: 600,
    height: 20,
    width: 200,
    border: "0",
    background: "#D3D3D3",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position:absolute;
  height: 20px;
  width: 0;
  border-radius: 200px;
  background: #0563bb;
  top: 0;
  left: 0;
}

svg {
  position: relative;
  width: 20px;
  margin: 0 auto;
  display: block;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              <div class="progress-bar"></div>
                          <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
                            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

【讨论】：