时间戳

首页 > 解决方案 > 如何修复切换动画按钮以覆盖表单输入字段集而不破坏表单

javascript - 如何修复切换动画按钮以覆盖表单输入字段集而不破坏表单

问题描述

尝试创建动画 div 以覆盖表单输入字段，当单击发送按钮时，封面动画会破坏表单输入字段结构。

我试图改变位置并在 html 中以不同的变体包装动画 div。

重写 css 动画和位置代码，这是我得到的最接近预期的结果。试图在网上寻找解决方案，但没有成功。

HTML：

* {
  margin: 2px;
  padding: 0;
}


/* -------------------- Contact form style -------------------- */

.formContainer {
  width: 650px;
  padding: 1px;
  margin: 2px;
  border-radius: 100px;
  border: 2px solid black;
}

.fieldsetInput {
  border: none;
  display: inline;
  margin: 0;
}

input {
  border: none;
  border-bottom: 1px solid black;
  margin: 0px 0px 0px 10px;
  min-width: 120px;
}

.submitButton {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 1px;
  border-radius: 50%;
  border: 0 solid black;
  color: white;
  background-color: black;
}


/* -------------------- Animation -------------------- */

.submitAnimation {
  animation-name: submitAnimation;
  -webkit-animation-name: submitAnimation;
  animation-duration: 1s;
}

@keyframes submitAnimation {
  0% {
    background-color: black;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: orange;
    left: 598px;
    top: 0px;
  }
}

.curtainAnimation {
  animation-name: curtainAnimation;
  -webkit-animation-name: curtainAnimation;
  animation-duration: 1s;
}

@keyframes curtainAnimation {
  0% {
    background-color: #333;
    width: 0px;
    height: 52px;
    left: 0px;
  }
  100% {
    background-color: #686868;
    width: 598px;
    height: 52px;
    left: 0px;
  }
}
<body>

  <form class="formContainer ">

    <div class="curtainAnimation"></div>

    <button class="submitButton submitAnimation" name="submit" type="submit">send</button>

    <fieldset class="fieldsetInput">
      <input placeholder="email" type="email">
      <input placeholder="phone" type="number">
      <input placeholder="name" type="text">
    </fieldset>

  </form>

</body>

单击“发送”按钮时，预期结果：当按钮动画向右滑动时，新消息应覆盖表单输入字段并在输入字段所在的位置显示新文本。

https://jsfiddle.net/danielVep/o3xdafvy/1/

我可以只使用 css 修复它吗？还是使用香草javascript？

标签： javascripthtmlcssformscss-animations

解决方案

这是你想要达到的目标吗？

` 发送

<fieldset class="fieldsetInput">
    <input placeholder="email" type="email">
    <input placeholder="phone" type="number">
    <input placeholder="name" type="text">
</fieldset>

`

`
* {
    margin: 2px;
    padding: 0;
}

/* -------------------- Contact form style -------------------- */
.formContainer {
    width: 650px;
    padding: 1px;
    margin: 1px;
    position: relative;
    border-radius: 100px;
    border: 2px solid black;
  overflow: hidden;
}

.fieldsetInput {
    border: none;
    display: inline;
    margin: 0;
}

input {
    border: none;
    border-bottom: 1px solid black;
    margin: 0px 0px 0px 10px;
    min-width: 120px;
}

.submitButton {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 1px;
    border-radius: 50%;
    border: 0 solid black;
    color: white;
    background-color: black;
}

.formContainer::before {
  content:"";
margin: 1px;
  width:50px;
  height: 52px;
  border-radius: 40px;
  display: inline-block;
  position: absolute;
  animation-name: curtainAnimation;
  animation-duration: 1s;

}


/* -------------------- Animation -------------------- */

.submitAnimation{
    animation-name: submitAnimation;
    -webkit-animation-name: submitAnimation;    

    animation-duration: 1s;
}

@keyframes submitAnimation {
    0% {background-color: black; left: 0px; top: 0px;}
    100% {background-color: orange; left: 598px; top: 0px;}
}

.curtainAnimation {
    animation-name: curtainAnimation;
    -webkit-animation-name: curtainAnimation;
    animation-duration: 1s;
}

@keyframes curtainAnimation {
    0% {background-color: #333; width: 50px; height: 50px; left: 0px;}
    100% {background-color: #686868; width: 648px; height: 50px; left: 0px;}
}
`

推荐阅读