jquery - 使用 CSS-transition 从右向左移动 div

Question

我在一个抽屉上工作，我必须在单击按钮时从左向右移动 div。我正在尝试使用 CSS 转换和 jQuery 来执行此操作，但它不起作用。这是我到目前为止所尝试的:

$(document).ready(function() {
  $(".openUserEditBox").on("click", function() {
    $(".user-drawer").show();
  });
});

.user-drawer {
  position: relative;
  width: 600px;
  top: 50px;
  background-color: #f2f2f2;
  border: 1px solid #bbbbbb;
  min-height: 450px;
  float: right;
  display: none;
  left: 100px;
  transition: left 1s ease-in-out;
}

.user-menu {
  padding: 10px 20px;
  position: absolute;
}

.btn-default {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #bbbbbb;
  width: 150px;
}

.btn-default:hover {
  cursor: pointer;
  box-shadow: inset 0 1px 3px 0 #bbbbbb;
}

.btngroup {
  float: right
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btngroup">
  <button class="btn-default openUserEditBox">Show Drawer</button>
  <button class="btn-default closeUserEditBox">Hide Drawer</button>
</div>
<div class="userForm">
  <div class="user-drawer">
    <div class="user-menu">
      <h1>Edit User</h1>
    </div>
  </div>
</div>

Answer 1

如果要转换left 属性，则不能使用show() 和hide()。只需在 JavaScript 中设置 left 属性即可。

$(document).ready(function() {
  $(".openUserEditBox").on("click", function() {
    $(".user-drawer")[0].style.left = '0';
  });
  $(".closeUserEditBox").on("click", function() {
    $(".user-drawer")[0].style.left = '602px';
  });
});

.userForm {
  overflow-x: hidden;
}

.user-drawer {
  position: relative;
  width: 600px;
  background-color: #f2f2f2;
  border: 1px solid #bbbbbb;
  min-height: 450px;
  margin-left:auto;
  left: 602px;
  transition:left 1s;
}

.btn-default {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #bbbbbb;
  width: 150px;
}

.btngroup {
  text-align:right;
  margin:8px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btngroup">
  <button class="btn-default openUserEditBox">Show Drawer</button>
  <button class="btn-default closeUserEditBox">Hide Drawer</button>
</div>
<div class="userForm">
  <div class="user-drawer">
    <div class="user-menu">
      <h1>Edit User</h1>
    </div>
  </div>
</div>

请注意，我省去了 float ，因为它们会干扰用户表单中的溢出。希望它在当前形式下仍然可用。