CSS3 动画 + jQuery 在移动设备上无法正常工作答案

【问题标题】：CSS3 animation + jQuery not working properly on mobileCSS3 动画 + jQuery 在移动设备上无法正常工作
【发布时间】：2015-03-25 12:47:36
【问题描述】：

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

    $(".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>

还有 CSS：

.book-container {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: absolute;
    left: 766px;
    top: 278px;
    z-index: 99;
}

.book-container, .book {
    width: 260px;
    height: 560px;
}

.book-flipper {
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.book {
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    -webkit-transform: rotateY(0deg) ;
    transform: rotateY(0deg) ;
}

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

【问题讨论】：

试试-webkit-transition: all 0.6s;。 Safari 对转换属性规范很严格。
尝试alert in if (phase == "move") { 验证条件。

标签： jquery css mobile touchswipe

【解决方案1】：

我创建了一个 jsfiddle，我们或许可以使用它。 http://jsfiddle.net/symeon/81u303oa/ 或全屏结果https://jsfiddle.net/symeon/81u303oa/embedded/result/

这确实适用于我的 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 和你上面贴的一样。

【讨论】：