javascriptに関する質問

Question

javascriptに関する質問です。
要素(id="selectul")の30％が画面に表示されたときに、
要素がふわっと出現する(class= "boxappear"をidに付与する)Javascriptを実装しています。

しかし、
要素の30％を過ぎても要素が出現することがありません。
インターネットでも調べたのですが、うまくできなかったので
詳しい方にご教授して頂けると助かります。

また、私自身プログラミング初心者のため、お手柔らかにお願いいします。
jQueryを使用した方法もあるようですが、今回はjavascriptで実装したいと考えています。

また、とくにエラーなどはでていません。
よろしくおねがいします。

id="selectul"はulを使用したリストで、liの中にはselectタグ・aタグを使用しています。

#selectul{
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 52px;
color: #797979;
text-align: center;
margin:100px auto;
opacity: 0;
transform: translateY(30px);
transition: all 1s;
width: 1200px;
height:700px;
list-style-type: none;
}

.boxappear{
opacity: 1;
transform: translateY(0);

}

{
const target = document.getElementById("selectul");

function callback(entries,obs){
console.log(entries[0]);

if(!entries[0].isIntersecting){
return;
}
entries[0].target.classList.add("boxappear");
obs.unobserve(entries[0].target);
}

const option = {
threshold: 0.3,
};
const obsever = new IntersectionObserver(callback, option);
obsever.observe(target);

}

Answer 1

CSS詳細度の問題かと思いますので、以下のようにしてはどうでしょうか。

        #selectul.boxappear {
            opacity: 1;
            transform: translateY(0);

        }

---

参考：
100年後も崩れないCSS勉強会 · 第1回「詳細度」

Comments

[maina10]

ご回答ありがとうございます！
実装してみましたが、解決できませんでした。

Javascriptのconstを
const target = document.querySelector("main");
と変更し、cssも上記に合わせて変更したところ、実装できました。
document.getElementById("selectul");との違いがイマイチわからないまま解決しました。
もし、理由がわかれば教えて頂けるとありがたいです。

[Lhankor_Mhy]

ご解決されて何よりです。

理由は、CSS詳細度の問題かと思います。
#selectul を main にしたということは、
詳細度が 100 から 001 になったということですから、
.boxappear の 010 を上回ったためだと思います。