Jquery 触发css转换动画的javascript touchstart事件

我正在尝试css3的“卡翻转”技术，据我测试，除了在iOS中，它工作得很好。 第一次“滑动”时，将触发动画。第二次它什么也不做。你可以看看这个例子

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

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

添加了关于everywhere的z-index属性

将“动画”更改为向容器添加边框之类的简单内容

将ontouchstart更改为ontouchmove

脚本工作正常，类“hover”始终处于切换状态。似乎iOS只是不想“渲染”更改一次以上

---

有人有想法吗？

我想你忘了在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中测试了它，它正常工作。

没有忘记前缀，但你是对的，：hover是这里的坏人。这是否意味着无法在悬停和滑动上执行此操作（因为触摸设备上不存在悬停）@Gregory实际上，

：悬停确实存在，请在您的iDevice上检查此操作。
：hover
的问题是必须触摸元素外部才能删除
：hover
属性/效果。