web-dev-qa-db-ja.com

cssトランジションがモバイルで機能しないchrome

テキストをクリックすると、cssトランジションで画像を拡大縮小しようとしています。

チェックマークの画像がアニメーション化され、リンクがクリックされるたびに表示されます。 iPhoneではChromeただし、チェックマークはアニメーション化されません。css{transition：transform 200ms}を無視しているように見え、ある状態から別の状態にジャンプするだけです。

IPhone Chromeブラウザを除いてどこでも動作するようです-私はできる限りすべてを試しましたが、それは完全に私を困惑させました！

コードペンリンク： https://codepen.io/anon/pen/oqBJzr

CSS：

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

JavaScript：

function checkMarkAnim() {

    $('.checkmark').toggleClass('scale');

}

何がうまくいかなかったのかについてのポインタは本当に役に立ちます。

前もって感謝します

更新：

-webkit-transition: -webkit-transform 200ms;を追加するという提案は、問題を解決していないようです（最初は問題があったと思っていましたが）。

css-transitionscss-transforms
7
HMS

-webkit-transition: transform 200ms;も追加/保持してください。したがって、最終的には次のようになります。

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

モバイルでの動作についてはこちらをご覧くださいchrome（iOS）： https://codepen.io/miikaeru/pen/aMXYEb

1
Michael Meister

実際に私のために働いたものを検索して数日後はちょうどChrome再起動。

1
Aliaksandr Sushkevich