时间戳

首页 > 解决方案 > 为 div 元素设置动画

javascript - 为 div 元素设置动画

问题描述

希望为 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);
}

标签： javascripthtml

解决方案

我认为，最好的方法是使用 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 开始动画。

顺便说一句，如果你想要动画一些东西。对不强制布局更新的属性进行动画处理总是更好：变换和不透明度。浏览器动画的其他属性，如顶部、底部、边距是昂贵的。如果可能的话，你应该避免它们。 阅读更多

推荐阅读