我第一次用自己的双手创建了一个网站，冒了很大的风险（太新了）。话虽如此，我知道我很草率，所以请纠正每一个细节这样我就可以学习了：）最初，使用Rails 7 + bootstrap和普通的html/CSS开发似乎很容易。在开发过程中，我使用assets/javascript/application.js中的以下javascript向网站中的元素添加了一个隐藏/显示动画。问题是当我以任何方式导航到其他页面时，这都不起作用（href，link_to标签等）除非我重新加载我刚刚导航到的页面。我检查了一下，javascript似乎被缓存在浏览器中但没有重新加载，我用控制台日志评估了这一点（我相信，我可能是错的，但是重新加载导致了它的日志，但导航到同一页面没有日志。这里是一些代码，请仔细考虑，请指出任何缺点，我渴望变得更好哈哈！

import "@hotwired/turbo-rails"
import "controllers"

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        console.log(entry)
        if (entry.isIntersecting){
            entry.target.classList.toggle('show', entry.isIntersecting);
        } else {
            entry.target.classList.remove('show');
        }
    });
});

const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));

CSS如下;

.hidden{
    opacity: 0;
    filter: blur(5px);
    transition: opacity, filter 1s;
}
@media(prefers-reduced-motion){
    .hidden{
        transition: none;
    }
}
.show{
    opacity: 1;
    filter: blur(0);
}

和一个使用的HTML的例子是;

<h1 class="hidden" style="text-align:center;font-size:50px;">About me</h1>

如上所述，我已经检查了网页，发现javascript是存在的（我相信这要归功于rails资产管道？）。我在所示javascript下面包含了一个窗口警报和控制台日志，以查看application.js是否已加载。如果页面被导航到（通过link_to或href），则不会显示警报或控制台日志。但是，导航到页面然后重新加载会导致javascript按预期工作，并且控制台日志/警报显示。我怀疑这与我使用turbo drive的天真有关&我在Rails中使用的所有Hotwire内容都是我很想明白，但不哈哈！