3

Chrome (WinXP では 19.0.1084.46 m) および Safari (OS X 10.7.4 では 5.1.7) では、このフィドルhttp://jsfiddle.net/Vkpwm/が機能します。Google 画像をクリックすると緑色の div が表示/非表示になりますが、iPhone と xCode の iPhone シミュレーター (ダイレクト ページhttp://jsfiddle.net/Vkpwm/show/を使用) にロードすると、div は表示されません。再び表示されます。

「-webkit-transition: 0.5s;」という行を削除します。CSSからそれは機能しますが、明らかにアニメーションが壊れます。「visibility: hidden;」という行を削除する も機能しますが、div がまだそこにあり、イベントが発生することを意味します (たとえば、div が完全に不透明であってもアラートが発生します)。

これは iOS のバグですか、それともデスクトップ ブラウザで回避できる何か間違ったことをしていますか?

4

2 に答える 2

4

SO: iOS CSS opacity + visibility transitionでこの質問を見つけた後、最終的に解決策を見つけました。

可視性を設定する場合にのみ不透明度への遷移を適用する必要がありました: 可視、しかし非表示になる前に不透明度をアニメーション化するために、可視性: 非表示に適用したままにします。

私の更新された動作中のフィドルはhttp://jsfiddle.net/Vkpwm/3/です。

于 2012-05-24T12:44:59.623 に答える
0

トランジションの不透明度だけが最悪です。

iPhoneでは、要素に焦点を合わせるためにタップする必要があるので、これが私の問題を修正した方法です。

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

不透明度の遷移を：activeに追加しました。

このようにして、Chrome、Firefox、iPhone（タップ時）のすべてのトランジションアニメーション（アニメーションを高さなどに適用することを検討してください）で機能します。

不透明度の変化を発見してくれたGrezzoとMichaelMartin-Smuckerに感謝します。

于 2013-02-24T23:17:11.317 に答える