お世話になっております。
機能
画面ロード or スクロール位置でフェードイン。
jsでaddClassしてアニメーション。
問題点
CSSのtransitionやtransformでフェードインやアップなどを実装しているのですが、
iOSのChromeでのみ、動作しない。他のブラウザでは動作します。
フェードイン→しない。いきなり現れる。=transitionが効いてない
ポジションアップ→しない = transformが効いてない
試した方法
ググって出てきた解決法で、
-webkit-transition: transform all 1s;
-webkit-transition: -webkit-transform all 1s;
という2つの記述を追加。
しかし変化無しです...
現状のコード
CSS
1.fade_off { 2 opacity: 0; 3 transition: all 1s; 4 transform: translateY(100px); 5 -webkit-transition: all 1s; 6 -webkit-transition: transform all 1s; 7 -webkit-transition: -webkit-transform all 1s; 8 -moz-transition: all 1s; 9 -o-transition: all 1s; 10 -ms-transition: all 1s; 11 -webkit-transform: translateY(100px); 12} 13 14.fade_on { 15 opacity: 1; 16 transform: translateY(0px); 17 -webkit-transform: translateY(0px); 18} 19 20.fade_out { 21 opacity: 0; 22 -webkit-transition: -webkit-transform all 1.5s; 23 -moz-transition: all 1.5s; 24 -o-transition: all 1.5s; 25 -ms-transition: all 1.5s; 26 transition: all 1.5s; 27} 28 29.fade_in { 30 opacity: 1; 31}
Javascript
1var ptop = $(sections).eq(i).offset().top; 2var scroll = $(window).scrollTop(); 3var windowHeight = $(window).height(); 4if (scroll > ptop - windowHeight + 100) { 5 $(sections).eq(i).addClass('fade_in'); 6}

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。