Question

我正在尝试使用this文章在我的sencha touch应用程序中实现导航抽屉。本文中解释的动画是使用webkit-transform完成的。这就像我的桌面和Android设备上的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

因为您只是使用＆＃34;来自＆＃34; （= 0％）和＆＃34;到＆＃34;你的关键帧中（= 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);
}

webkit-transform在iOS上不起作用

1 个答案: