ボタンをクリックすると、ボタンが消えて要素が表示されるjavascriptを作ったのですが、iPhoneで、ボタンをクリックしても動作していません。
クリックイベント自体は動いていることは確認できたのですが、その後の要素をanimateで消したり表示したりする箇所が動いていない様子です。
iOSのコンソールでは
TypeError: this.animate is not a function.
と表示されているので、animate関数が対応していないのかな?と思いましたが実際どうなんでしょうか?
また、対応していない場合、スマートフォンでアニメーションさせる関数は別にあるのでしょうか?
HTML
1<div class="trigger"> 2 <a href="javascript:void(0)" data-trigger="simulationToggle">Triggerです</a> 3</div> 4<div class="target" data-target="simulationToggle">Targetです</div>
javascript
1var eleTrigger, eleTarget, getTriggerH, getTargetH; 2eleTrigger = document.querySelector("[data-trigger='simulationToggle']"); 3eleTarget = document.querySelector("[data-target='simulationToggle']"); 4 5getTriggerH = eleTrigger.getBoundingClientRect().height; 6getTargetH = eleTarget.getBoundingClientRect().height; 7 8eleTarget.setAttribute("style","height:0px"); 9 10eleTrigger.addEventListener('click', function () { 11 this.parentNode.animate({ 12 opacity: [1, 0], 13 height: [getTriggerH+"px", "0px"] 14 },{ duration: 100, fill: 'forwards'}); 15 eleTarget.animate({ 16 opacity: [0, 1], 17 height: ["0px", getTargetH+"px"] 18 },{ duration: 400, delay: 200, fill: 'forwards'}); 19});
iPhone6plus, iOS12.1.3, Safariです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。