CSS3动画+ jQuery在手机上无法正常工作

我正在使用TouchSwipe插件制作一些动画。主要的问题是在这个事件：CSS3动画+ jQuery在手机上无法正常工作

$(".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），图像在触摸和拖动时不会生成动画。

来源

2015-03-25 marcelo2605

尝试'-webkit-transition：全部0.6s;'。 Safari很难转换属性规范。 – 2015-03-25 12:50:37

试着在'if'（相位==“移动”）{''用于验证条件''提醒''。 – 2015-03-25 12:54:43

我已经创建了一个jsfiddle，我们可以在其上工作。 http://jsfiddle.net/symeon/81u303oa/或全屏结果https://jsfiddle.net/symeon/81u303oa/embedded/result/

这对我的银河s5工作 - 是你的标记略有不同，我改变它添加滑动区类到.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如上所述。

来源

2015-07-14 08:41:13

CSS3动画+ jQuery在手机上无法正常工作

回答

相关问题