CSS3动画&x2B；jQuery在移动设备上无法正常工作

我正在使用TouchWipe插件制作一些动画。主要问题在于此事件：

    $(".swipe-area").swipe({
    swipeStatus: function (event, phase, direction, distance) {
        if (phase == "move") {
            $('.book').css({
                '-webkit-transform': 'rotateY(' + distance + 'deg)',
                'transform': 'rotateY(' + distance + 'deg)'
            });
        }
    },
    triggerOnTouchEnd: false,
    threshold: 90
});

标记：

<div class="book-container">
    <div class="book-flipper">
        <div class="book">
            <img src="assets/img/book.png" alt="" width="260" height="560">
        </div>
    </div>
</div>

---

在桌面上，它可以正常工作。但是在移动设备（iPad Safari）上，图像在触摸和拖动时不会产生动画。

我已经创建了一个JSFIDLE，我们或许可以使用它。或全屏显示结果

这在我的Galaxy s5上确实有效-如果您的标记稍有不同，我将其更改为将swipe area类添加到.book container div

<div class="book-container swipe-area">
    <div class="book-flipper">
        <div class="book">
            <img src="https://www.kidspass.co.uk/assets/membership-card-front.jpg" alt="" width="260" height="560">
        </div>
    </div>
</div>

---

css和js与上面发布的一样。

试试

-webkit transition:all 0.6s。Safari对转换属性规范要求很高。请尝试在
if（phase==“move”）{
中发出
alert
以验证条件。
<div class="book-container swipe-area">
    <div class="book-flipper">
        <div class="book">
            <img src="https://www.kidspass.co.uk/assets/membership-card-front.jpg" alt="" width="260" height="560">
        </div>
    </div>
</div>