我正在使用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)上,图像在触摸和拖动时不会生成动画。
答案 0 :(得分:0)
我已经创建了一个我们可以继续工作的jsfiddle。 http://jsfiddle.net/symeon/81u303oa/或全屏结果https://jsfiddle.net/symeon/81u303oa/embedded/result/
这适用于我的Galaxy 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就像你上面发布的一样。