javascript - 使用 JS 动画元素

Question

我试图将一个 div 从其原始位置向左移动，即向右移动，我想要的效果是 div 向左移动然后向右滑动一点。

仅限 Vanilla JS。

代码:

CSS:

leftBtn.addEventListener("click", function() {
    pushDiv.style.right = "420px";
    pushDiv.style.right = "360px";
    });

* {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  transition: 0.5s ease;
}

.holder{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 300px;
  width: 800px;
  margin: 0 auto;
  background: #eee;
  transform: translate(-50%, -50%);
  box-shadow: 4px 9px 2px #000;
}
.push-div {
  width: 350px;
  position: absolute;
  background: #F44336;
  height: 370px;
  right: 0;
  top: -35px;
  border-radius: 5px;
}

<div class="holder">
        <button type="button" name="button" id="btn1">Left</button>
        <button type="button" name="button" id="btn2">Right</button>
        <div class="push-div" id="pushDiv">

        </div>

但是在点击按钮时它显示 360px 而不是给出效果。

我该如何实现？我试过添加延迟，但这似乎不起作用。

Answer 1

var leftBtn = document.getElementById('leftBtn'),
  pushDiv = document.getElementById('pushDiv');

leftBtn.addEventListener("click", function() {
  pushDiv.style.right = "410px";
  setTimeout( function() {
    pushDiv.style.right = "360px";
    }, 600 );
});

#pushDiv {
  position: absolute;
  background: red;
  top: 100px;
  right: 200px;
  width: 100px;
  height: 100px;
  transition: all .6s;
}

<button id="leftBtn">Move It</button>
<div id="pushDiv"></div>