test

デモサイトのコーディングをしていまして、試しにサイトにアップしてみたところiPhone（safari , chrome）の一部のアニメーションが動きませんでした。Androidoは動作確認できました。丸一日調べてみたのですが、解決に至らなかったのでこちらで質問させていただきました。動作としては、jsで画面領域に対象の要素が入ったら activeを付与し、要素が左右から出てくるというごく一般的なアニメーションになります。以下に動作NGの一部のソースコードを載せますので、わかるかた教えていただけないでしょうか？ ```html test

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

オンライン対応

24時間いつでも受講できる！

講師はネイティブ

お気に入りの講師が自由に選べる！

``` ```css * { margin: 0; padding: 0; } .area { background: blue; width: 100%; height: 360px; position: relative; overflow: hidden; } .slide { display: flex; justify-content: space-between; align-items: center; background: white; height: 120px; position: absolute; padding: 20px; box-sizing: border-box; } .wrap { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } .online { top: 40px; right: 16px; left: 0; border-radius: 0 20px 20px 0; } .teacher { top: 200px; right: 0; left: 16px; border-radius: 20px 0 0 20px; } .online > .wrap > img { width: 87px; height: 60px; margin-right: 40px; } .teacher > .wrap > img { width: 50px; height: 60px; margin-right: 40px; } .text-area p:first-of-type{ font-size: 24px; color: #FF2A2A; font-weight: bold; letter-spacing: 0.1em; } .text-area p:last-of-type { font-size: 18px; letter-spacing: 0.1em; line-height: 1.6; } .slide.online { opacity: 0; -webkit-transform: translateX(-90%); transform: translateX(-90%); } .slide.online.active { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition: 0.5s; -webkit-transition: 0.5s; } .slide.teacher { opacity: 0; -webkit-transform: translateX(90%); transform: translateX(90%); } .slide.teacher.active { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition: 0.5s; -webkit-transition: 0.5s; } ``` ```javascript 'use strict'; { const online = document.querySelector('.slide.online'); const teacher = document.querySelector('.slide.teacher'); const options = { rootMargin: '0px', threshold: 0.1, }; const setItemActive = (entries) => { entries.forEach((entry) => { // console.log(entries); if (entry.isIntersecting === true) { console.log(entry); entry.target.classList.add('active'); } }); }; const observer = new IntersectionObserver(setItemActive, options); observer.observe(online); observer.observe(teacher); } ```

	@@ -1,1 +1,1 @@
1	- webサイトが~~表示され~~ない
1	+ webサイトのアニメーションが動作しない

質問編集履歴