javascript touchstart 事件触发css 变换动画

Question

我正在尝试 css3 'card-flip' 技术，据我测试它效果很好，除了 iOS。第一次 'swipe' 动画将被触发。第二次它什么都不做。你可以看例子here.

这是我尝试过的： 1. 将 javascript 放在一个单独的文件中

jQuery('.flip-container').on('touchstart', function(){
    jQuery(this).toggleClass('hover');
});

脚本运行良好，class 'hover' 始终处于切换状态。似乎 iOS 只是不想 'render' 多次更改...

有人知道吗？

Answer 1

我假设您忘记了向 CSS 属性添加 -webkit 前缀。

-webkit-perspective: 1000;
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

此外，我已经从下面的行中删除了 :hover，所以我猜它与 touchstart 冲突。

/* .flip-container:hover .flipper, */ .flip-container.hover .flipper {
   -webkit-transform: rotateY(180deg);
}

完成更改后，我在 iPhone Safari 中测试了这个 demo，它可以正常工作。

javascript touchstart event to trigger css transform animation