Как исправить анимированную кнопку переключения, чтобы покрыть наборы полей ввода формы, не нарушая форму

При попытке создать анимированный div для покрытия полей ввода формы, при нажатии кнопки отправки анимация обложки нарушает структуру полей ввода формы.

Я попытался изменить положение и обернуть анимированный div в разные варианты html.

Переписав код анимации и положения 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?

Для этого потребуется столько же JavaScript, сколько и для изменения классов элементов, но анимацию можно сделать с помощью CSS.

— 22.07.2019 13:13

javascript html css forms css-animations

22.07.2019 13:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

176

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Может быть, это сработает. если это не работает, пожалуйста, добавьте комментарий.

css

.formContainer {
    position: relative;
}
.curtainAnimation {
    position: absolute;
    border-radius: 100px;
    top: -1px;
    left: 0;
}

22.07.2019 13:14

это то, чего вы хотите достичь?

` Отправить

<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;}
}
`

22.07.2019 13:45

Другие вопросы по теме

JQuery ajax не отображает данные из php в таблицу с angularjs и json

Я пытаюсь изменить размер изображения с помощью css, чтобы оно было удобно для мобильных устройств, но это не работает

Невозможно вызвать родительский метод с помощью триггера дочернего метода

Как рассчитать данные столбца таблицы html

Как добавить класс к кнопкам по клику

Содержимое таблицы скрыто нижним колонтитулом на iPhone

Что может быть причиной того, что переведенные элементы div НЕ перекрывают окружающий контент?

Удалите раздел prepend, когда есть только одна группа jQuery

Html-теги ul li не работают в «Windows Outlook»?

Как разместить текст справа и слева в нижнем колонтитуле, как на картинке

Как исправить анимированную кнопку переключения, чтобы покрыть наборы полей ввода формы, не нарушая форму

Ответы 2

Другие вопросы по теме

Похожие вопросы