IOS Safari转换变换不起作用

Question

每当我尝试在最新的iOS Safari浏览器上应用一些代码，比如移动一个div时，它实际上不会在两个规则集之间进行过渡。我尝试改用除百分比值以外的其他值，但到今天为止，我从未能够使其在应用了任何translate属性时使用transition: transform;正常工作。

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

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

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

{{链接1：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>

- ui-matt

Answer 1

iOS Safari旧版本仅支持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>

- sergdenisov

---

看起来解决了问题，谢谢Sergey！现在过渡效果完美无缺（在iPhone 6 iOS8上测试通过）。 - ui-matt

你解决了我的难题，帮我找到了在 iOS 15 中 transform: translateX(-50%) 无法正常工作的 bug。 - chilly