CSS IOS Safari 转换转换不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30128587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IOS Safari transition transform not working
提问by ui-matt
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 translateproperty applied.
每当我似乎应用一些代码来让我们说移动一个 div 时，例如使用最新的 iOS Safari 浏览器，它实际上并没有在两个规则集之间转换。我曾尝试更改为使用百分比值以外的值，但直到今天，当我transition: transform;用于任何translate应用的属性时，我始终无法使其工作。
I'm using the correct prefixes and checked support and should be working no problem.
我使用了正确的前缀并检查了支持，应该没问题。
http://caniuse.com/#search=transition
http://caniuse.com/#search=transition
http://caniuse.com/#search=translate
http://caniuse.com/#search=translate
$('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>回答by sergdenisov
Old versions of iOS Safari support only vendor-prefixed properties and values for transitionand transform, so you should use -webkit-transition: -webkit-transforminstead -webkit-transition: transform:
旧版本的 iOS Safari 仅支持供应商前缀的属性和值transitionand transform，因此您应该-webkit-transition: -webkit-transform改用-webkit-transition: transform：
$('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>