webkit-transform不能在iOS上工作

webkit-transform doesn't work on iOS

本文关键字：工作 iOS 不能 webkit-transform      更新时间：2023-09-26

我试图在我的sencha触摸应用程序中使用这篇文章实现导航抽屉。本文中解释的动画是使用webkit-transform完成的。这在我的台式机和安卓设备的chrome浏览器上非常有效，但在iPad mini上不行，甚至在chrome浏览器上也不行。这是我的css:-

.slide{
-webkit-animation-duration: .200s;
-webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855);
}    
@-webkit-keyframes slideout {
from {
-webkit-transform: translate3d(0,0,0);
}
to {
-webkit-transform: translate3d(250px,0,0);
};
}
@-webkit-keyframes slidein {
from {
-webkit-transform: translate3d(250px,0,0);
}
to {
-webkit-transform: translate3d(0px,0,0);
};
}
.slide.out {
-webkit-animation-name: slideout;
-webkit-transform: translate3d(250px,0,0);
}
.slide.in {
-webkit-animation-name: slidein;
-webkit-transform: translate3d(0px,0,0);
}

这是iOS特有的问题还是我做错了什么?

因为你只是在关键帧中使用"from"(=0%)和"to"(=100%)，而没有定义任何其他步骤(25%，50%等)，我没有看到使用关键帧的实际好处。特别是因为关键帧会导致大量的CSS行。在我看来，关键帧只有在你想要定义子步骤时才有意义。

对于所有其他目的，过渡应该是一个选择的解决方案，因为它们只是从起点到你的目标值的动画:参见Fiddle

div {
    background:red;
    -webkit-transform:translate3d(0,0,0);
    -webkit-transition:-webkit-transform 1s;
}
.slide.in {
    -webkit-transform:translate3d(0,0,0);
}
.slide.out {
    -webkit-transform:translate3d(250px,0,0);
}
相关文章：