Как я могу анимировать элемент из положения макета stati c в абсолютное положение макета?

Question

У меня есть форма и внутри этой формы кнопка. Первоначально кнопка статически расположена в положении по умолчанию на основе обычной компоновки. На событии (в примере ниже, нажатие кнопки) я хочу переместить его в центр формы с помощью анимации, и во время этой анимации выполняется горизонтальное переворот (с использованием масштабного преобразования) и когда анимация находится в середине (когда визуализируется ширина равна 0) при изменении содержимого кнопки на абзац, который после загрузки будет отображать анимацию, вероятно, выполненную с помощью svg и ссылки.

Этот фрагмент выполняет часть, которую я хочу (все до второй части переворот с изменением содержимого и изменением размера кнопки, чтобы быть больше), но без начальной позиции c, с которой начинается анимация:

var form = $("form")
var button = $("button")

button.on("click", function(){
  var x = (form.outerWidth() - button.outerWidth()) / 2;
  var y = (form.outerHeight() - button.outerHeight()) / 2;

  button.css({
  	transform: `translateX(${x}px) translateY(${y}px) scaleX(0)`
  });
})

form {
  background: #aaa;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  position: relative;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  
  transition: transform 1s;
}

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

<form>
  <p>Hello World</p>
  <button onclick="return false;">Do something</button>
</form>

(https://jsfiddle.net/silviubogan/L1ogpf6a/)

Как мне достичь того, что я хочу, наиболее правильным способом ? Обратите внимание, что остальная часть формы должна оставаться на месте.

Спасибо.

Answer 1

Есть два способа сделать это. Сначала используется setTimeout ( ссылка ) с 1000 мс в качестве параметра, поскольку анимация css длится 1 секунду, и функция обратного вызова, отображающая SVG. Второй использует jQuery animate ( ссылка ) вместо css и использует параметр complete для отображения SVG. Поскольку вы уже используете css для анимации, давайте go с первой опцией:

button.on("click", function(){
  // hide button
  window.setTimeout(transform2, 1000);
})

function transform2() {
  // change contents
  // resize button
}

Пример скрипта: https://jsfiddle.net/eynL91qu/