2015-03-25 95 views
0

我正在使用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),圖像在觸摸和拖動時不會生成動畫。

+0

嘗試'-webkit-transition:全部0.6s;'。 Safari很難轉換屬性規範。 – 2015-03-25 12:50:37

+0

試着在'if'(相位==「移動」){''用於驗證條件''提醒''。 – 2015-03-25 12:54:43

回答

0

我已經創建了一個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如上所述。