使用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>

Answer 2

尝试使用css动画

JS

const pushDiv = document.querySelector('.pushdiv');

leftBtn.addEventListener('click', animate());

function animate(){
    pushDiv.addClass('animation');
{

CSS

.animation{
    animation: slideleft 0.7s ease-in; 
}

@keyframes slideleft{
    // enter your animation keyframes there are some cool tutorials that will show you how to do that same effect 
}