javascript - 为什么 CSS 过渡与基于 jQuery 动画方法的另一个动画不能很好地配合？

Question

我有一个按钮，我希望在单击它时移动它，并且在移动时它也应该翻转。因此有两个动画同时发生，并且具有相同的持续时间。我还为按钮的所有属性设置了 CSS transition。在我看来，当我同时使用 jQuery 的 animate 方法和 CSS 过渡效果时，只有 CSS 缩放变换才起作用。当我删除其中一个动画时，另一个效果很好。

// find elements
var button = $("button");

// handle click
button.on("click", function() {
  button.css({
    "transform": "scaleX(0)"
  });
  
	// the bug: the following animation is not visible
  button.animate({
    "top": "-100px" // I tried without "px" too
  }, 0.15 * 1000);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  
  position: relative;
  transition: all 0.15s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Hello World</p>
  <button>Click me</button>
</div>

JSFiddle 是 here .

谢谢。

Answer 1

仅在transition中使用所需的属性，即transform 0.15s而不是all 0.15s

// find elements
var button = $("button");

// handle click
button.on("click", function() {
  button.css({
    "transform": "scaleX(0)"
  });

  // the bug: the following animation is not visible
  button.animate({
    "top": "-100px" // I tried without "px" too
  }, 0.15 * 1000);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;

  position: absolute;
  transition: transform 0.15s; /* change here*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Hello World</p>
  <button>Click me</button>
</div>