元素位置上的CSS过渡

Question

当header上添加.active类时，我如何将.menu-trigger从位置top:12px, left: 0过渡到其最终位置top: 12px, left: 120px ?请注意，当添加.active类时，.menu-trigger变成position: fixed并移出标题。这是我想解决的问题的一个要求。

var header = document.querySelector("header");
document.getElementById('test').onclick = function() {
    header.classList.toggle('active');
}

body {
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  height: 60px;
  background: black;
  margin-top: 120px;
}
.menu-trigger {
  display: inline-block;
  border: none;
  color: white;
  background: cyan;
  height: 60px;
  width: 60px;
  font-size: 24px;
}
header.active .menu-trigger{
  position: fixed;
  top: 12px;
  left: 120px;
  right: auto;
  bottom: auto;
}
#test {
  margin-top: 24px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <button class="menu-trigger">
    <span class="fa fa-bars"></span>
  </button>
</header>
<button id="test">Test</button>

Answer 1

你可以让menu-trigger始终是固定的这样你就可以马上得到正确的位置

  position: fixed;
  top: 120px;

那么当添加活动类时，您所要做的就是更改左侧位置，而不必担心顶部或设置为静态，因为它已经是。确保你将top: 120px设置为活动状态或者将其全部删除因为它已经被设置为菜单触发器的基本样式这里是笔http://codepen.io/finalfreq/pen/RGgEkq