Question

试图为div元素制作特定的动画。我希望它（平稳地）下降，并且当它到达屏幕底部时又重新平滑地上升。

我的代码如下：

If语句中的Javascript部分是我遇到困难的地方。我希望盒子掉下来然后平稳地回来。

HTML：

<div class="verticalDiv" id="verticalDiv" onclick="verticalMove()"></div>

CSS：

.verticalDiv {
  position: absolute;
  top: 0px;
  right: 500px;
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background: red;
}

JS：

myVar1 = setInterval(verticalMove, 50);
v = 0;
function verticalMove() {
    redBox = document.getElementById('verticalDiv')

    redBox.style.top = v + "px";
        if (v >= 0) {
            v++;} 

        if (v === 200) {
            v--;
        }
    console.log(v);
}

Answer 1

我认为，最好的方法是使用CSS动画。您不必关心动画逻辑。只需使用关键帧。这是示例：

HTML

<div id="verticalDiv" class="verticalDiv"></div>

CSS

.verticalDiv {
    height: 20px;
    width: 20px;
    background: red;
}

@keyframes move {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
}

.verticalDiv.move {
    animation: move 3s ease-in-out;
}

JS

const verticalDiv = document.getElementById('verticalDiv');
verticalDiv.addEventListener('click', () => {
    verticalDiv.classList.toggle('move');
});

WORKING DEMO单击红色div开始动画。

顺便说一句，如果您想制作动画。最好为不强制布局更新的属性设置动画：变换和不透明度。其他属性（例如顶部，底部，边距）对于浏览器进行动画制作而言是昂贵的。如果可能，应避免使用它们。 Read more

Answer 2

您需要区分上下两个阶段。它可以是一个简单的true / false布尔值，但是存储“速度”或“增量”值（如+/- 1）也是一种非常典型的方法。

var v = 0;
var delta=1;
function verticalMove() {
    redBox = document.getElementById('verticalDiv')
    v += delta;
    redBox.style.top = v + "px";
    if (v <= 0) delta = 1;
    if (v >= 50) delta = -1;
}
function startMove(event) {
    setInterval(verticalMove,30);
    event.target.onclick="";
}

.verticalDiv {
  position: absolute;
  top: 0px;
  right: 500px;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="verticalDiv" id="verticalDiv" onclick="startMove(event)"></div>

动画div元素

2 个答案: