IOS Safari转换转换不起作用

时间:2015-05-08 16:26:19

标签: css css3 safari css-transitions vendor-prefix

每当我似乎应用某些代码时,如果使用最新的iOS Safari浏览器移动div,它实际上并没有在两个规则集之间进行转换。我已尝试更改为使用除百分比值之外但仍至今,当我使用transition: transform;应用任何translate属性时,我从未能使其工作。

我使用了正确的前缀并检查了支持,应该没有问题。

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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:23)

旧版iOS Safari仅支持transitiontransform的供应商前缀属性和值,因此您应使用-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>