web-dev-qa-db-ja.com

IOS Safariトランジショントランスフォームが機能しない

たとえば、最新のiOS Safariブラウザーを使用してdivを移動するためにコードを適用しているように見えるときはいつでも、実際には2つのルールセット間で移行しません。パーセンテージ値以外を使用するように変更しようとしましたが、今日でも、適用されているtranslateプロパティにtransition: transform;を使用しても機能しませんでした。

正しいプレフィックスとチェック済みのサポートを使用しており、問題なく動作しているはずです。

http://caniuse.com/#search=transition

http://caniuse.com/#search=translate

JSFiddle

$('button').on('click', function() {
    $('.mydiv').toggleClass('added-class');
});
.mydiv {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: red;

    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: transform 0.6s ease-out;
    -o-transition: transform 0.6s ease-out; 
    -webkit-transition: transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}

.added-class {
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv"></div>
<button type="button">Toggle class</button>
csssafaricss-transitionsvendor-prefix
7
ui-matt

古いバージョンのiOSSafariは、ベンダープレフィックスのプロパティとtransitionとtransformの値のみをサポートしているため、-webkit-transition: -webkit-transformの代わりに-webkit-transition: transformを使用する必要があります。

JSFiddle

$('button').on('click', function() {
    $('.mydiv').toggleClass('added-class');
});
.mydiv {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: red;

    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);

    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: transform 0.6s ease-out;
    -o-transition: transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}

.added-class {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv"></div>
<button type="button">Toggle class</button>
24
sergdenisov