Javascript 使用Vue.js在滚动上淡入/淡出

我以前使用过以下功能，当项目出现在用户屏幕上时，它们会淡入人们的视野。我的一个项目就是一个例子

我找到了这个问题的原始解决方案（使用jQuery）

这是我使用的CSS代码

.card, .contact-div, .jumbotron-text, .jumbotron-button {
    opacity: 0;
    transform: translate(0, 20px); 
    transition: all 1.5s;
}

.visible {
    opacity: 1;
    transform: translate(0, 0);
}

这是我使用的jQuery

$(document).on("scroll", function() {
    //variable to see how far down the page scrolled
    var $pageTop = $(document).scrollTop();
    var $pageBottom = $pageTop + $(window).height();
    
    //fade in classes set to variables
    var $cards = $('.card');
    var $contact = $('.contact-div');

    //loop to see if card is in frame
    for (let i = 0; i < $cards.length; i++) {
        let card = $cards[i];
        //if in frame, make card visible
       if ($(card).position().top < $pageBottom) {
           $(card).addClass("visible");
       }
    }
    // if div is in frame, make div visible
    if ($($contact).position().top < $pageBottom) {
        $($contact).addClass("visible");
    }
});

$（文档）.on（“滚动”，函数（）{
//变量以查看页面向下滚动的距离
var$pageTop=$（document.scrollTop（）；
var$pageBottom=$pageTop+$（window.height（）；
//淡入类设置为变量
变量$cards=$（'.card'）；
变量$contact=$（'.contact div'）；
//循环查看卡是否在帧中
对于（设i=0；i<$cards.length；i++）{
let card=$cards[i]；
//如果在框架中，则使卡可见
if（$（卡片）.position（）.top<$pageBottom）{
$（卡片）.addClass（“可见”）；
}
}
//如果div在框架中，则使div可见
如果（$（$contact）.position（）.top<$pageBottom）{
$（$contact）.addClass（“可见”）；
}
});

这次我在应用程序中使用Vue，需要相同的效果，但只使用Vue或纯JS

---

有人能帮我把它翻译成Vue（最好）或vanilla JS（以避免将另一个框架jQuery加载到我的应用程序中）吗？

vanilla和jQuery都可以在Vue中使用。现代的方法是使用，然后像您所做的那样更改类或切换。看看别人是怎么做的：