JavaScript從底部到每個原始位置對絕對定位的元素進行動畫處理

Question

我在一個相對定位的容器中有幾個absolute定位的元素，我正在嘗試為它們設置動畫：

來自：其起始DOM位置下方200px

至：起始DOM位置

我嘗試了.animate()函數，但僅成功完成了相反的動畫處理。

編輯：我的意思是，我試圖在頁面加載時為元素的過渡設置動畫。

Answer 1

我設法用CSS關鍵幀做到這一點。

.elementsClass{
    transform: translateY(200px);
    animation: moveUp 0.8s ease forwards;
}

@keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

@-moz-keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

@-ms-keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

現在，元素被加載到其起始位置下方200px處，並顯示在其原始位置。