使用calc将css动画转换为javascript animate

Question

您好我正在尝试将我的CSS动画转换为jquery动画。

我创建了一个JSFiddle示例：https://jsfiddle.net/x69chen/g86m7ecm/

你可以看到，我已经注释了我曾经写过的文件

box1 {
    animation: drop 1s ease forwards;
}

@keyframes drop {
    from { opacity: 1 }
    to { opacity: 1; top: calc(65% - 82px); }
}

现在我正在尝试将其转换为jquery，因为我在前端使用vuejs组件，每次页面重新加载组件时，动画都会再次运行。

我试过

var top = $(".box").parent().height() * 65% - 82;
$(".box").delay(2000).animate({
    top: top
}, 1000);

它不能很好地工作，因为在jquery代码中，框没有掉到与css中相同的位置。

我在jquery延迟函数中设置了2000毫秒，但它似乎比我在CSS中设置的2s的延迟时间晚了很多。有谁知道它为什么？

感谢您的帮助！

Answer 1

您可以通过以下方式计算top：var top = $(".box").parent().height() * .65 - 82;