jquery - javascript touchstart事件触发css变换动画

Question

我正在尝试 css3“card-flip”技术，据我测试，它运行良好，但在 iOS 中除外。 第一次“滑动”时将触发动画。第二次它什么都不做。你可以看例子here .

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

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

1. 添加了有关所有位置的 z-index 属性
2. 将“动画”更改为简单的东西，例如向容器添加边框
3. 将 ontouchstart 更改为 ontouchmove

脚本运行良好，“悬停”类始终处于切换状态。似乎 iOS 只是不想多次“呈现”更改...

有没有人有想法？

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);
}

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