rails7的turbo页面加载问题

rails 6时代，每个页面加载的时候，又有一个turbolinks-progress-bar 来显示页面的load。
在页面顶部，通过动画的方式从左向右延伸来显示页面加载的进度。

rails7也包含这个动画，不过略有不同，这个进度表的默认class改成了，turbo-progress-bar. 除此之外别的没有变化。

不过rails7 有更好的处理方式。
因为默认所有的页面的加载都通过fetch来抓取页面。
在fetch的过程中在，真个网页是有的<html>标签是被加了属性的。
<html> 变成了 <html aria-busy="true" data-turbo-preview>

所以说如果想要显示这个页面的变化，可以通过css来控制这个期间的整个 html页面的样式。
比如给页面加个半透明。
html[aria-busy ]{
  opacity: 0.5;
}

二、当然还要更加复杂的办法：
比如：

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


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

>
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');
        }
    });
});

document.addEventListener("turbo:load", (event) => {
  console.log("turbo:load. runs every time a page is loaded");

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

参考

给turbo-frame局部加载增加动画，参考之前的文章。

给turbo-stream加载增加动画，参考这个。
阅读量: 858
发布于:
修改于: