javascript - 如何将元素从静态布局位置动画到绝对布局位置？

Question

我有一个表单，该表单内有一个按钮。最初，按钮根据通常的布局静态定位在默认位置。在发生事件时(在下面的示例中，单击按钮)，我想通过动画将其移动到表单的中心，并在此动画期间进行水平翻转(使用缩放变换)以及当动画位于中间时(当渲染时)宽度为 0)将按钮的内容更改为一个段落，加载后将显示可能由 svg 和链接完成的动画。

此代码片段实现了我想要的一部分(直到翻转的第二部分，更改内容并将按钮大小调整为更大)，但没有启动动画的初始静态位置:

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 ( reference ) 并以 1000ms 作为参数，因为您的 css 动画持续 1 秒，以及显示 SVG 的回调函数。第二种是使用 jQuery animate ( reference ) 而不是 css，并使用参数 complete 来显示您的 SVG。由于您已经在动画中使用 css，因此我们采用第一个选项:

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

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

fiddle 示例:https://jsfiddle.net/eynL91qu/