iOS Safari过渡转换不起作用 [英] IOS Safari transition transform not working

问题描述

例如，每当我似乎应用一些代码来说例如使用最新的iOS Safari浏览器移动div时，实际上并不会在这两个规则集之间进行转换.我尝试更改为使用百分比值以外的其他值，但直到今天，当我将transition: transform;应用于所应用的任何translate属性时，我都无法使其正常工作.

Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied.

我使用的是正确的前缀和经过检查的支持，应该没有问题.

I'm using the correct prefixes and checked support and should be working no problem.

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>

推荐答案

旧版本的iOS Safari仅支持transition和transform的供应商前缀属性和值，因此应使用-webkit-transition: -webkit-transform代替-webkit-transition: transform :

Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use -webkit-transition: -webkit-transform instead -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>

这篇关于iOS Safari过渡转换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！