webkit-transform 在 iOS 上不起作用

Question

我正在尝试使用this 文章在我的 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 特有的问题还是我做错了什么？

Answer 1

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

对于所有其他目的，过渡应该是选择的解决方案，因为它们只是从起点动画到您的目标值：See 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);
}