之前有做過一個微信中的H5小項目损合，其中有一個交互就是點擊完按鈕，頁面由下往上滑動切換至下一頁娘纷。做完后發(fā)現(xiàn)在Android(華為榮耀5a嫁审、華為榮耀3c和OPPO A37m)下效果都還好，但在iphone6s(10.2)中測試時卻不盡如人意(條件有限赖晶，其它機型未測)律适，可謂一波三折。今天就從頭到尾做一次總結(jié)記錄遏插。
一折
先從最簡單的demo開始擦耀，主要代碼如下：
<div id="wrapper" class="wrapper">
<div class="page page-one">
<h1>第一頁</h1>
<a href="javascript:void(0);" class="next-btn">下一頁</a>
</div>
<div class="hide page page-two">
<h1>第二頁</h1>
<a href="javascript:void(0);" class="next-btn">下一頁</a>
</div>
<div class="hide page page-three">
<h1>第三頁</h1>
<a href="javascript:void(0);" class="next-btn">下一頁</a>
</div>
<div class="hide page page-four">
<h1>第四頁</h1>
</div>
</div>
html, body, .wrapper {
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
max-width: 640px;
margin: 0 auto;
}
.hide {
display: none;
}
.page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.slideUp {
animation: SlideUp 1s ease;
}
@keyframes SlideUp {
0% { transform: translate3d(0, 100%, 0) }
100% { transform: translate3d(0, 0, 0) }
}
var wrapper = $('#wrapper');
var toNextPage = function(e) {
var curParent = $(e.target).parents('.page');
setTimeout(function(){
curParent.addClass('hide');
}, 1000)
curParent.next().removeClass('hide').addClass('slideUp');
}
wrapper.on('click', '.next-btn', function(e) {
toNextPage(e);
})
上述代碼我在三個安卓機上測試時都沒有問題，但在iOS下卻有這樣的一個異常涩堤，如果用戶不小心點擊在事件委托的元素"div.wrapper"上而非按鈕區(qū)域眷蜓，再點擊"下一頁"按鈕時，下一頁就會直接顯示出來胎围，而沒有從下到上的滑動效果吁系。。
針對這個異常白魂，我也查找了好久原因汽纤，很遺憾，福荸，至今沒能找到導(dǎo)致這個異常的原因蕴坪，但找到了兩個解決方案：
- 不采取事件委托，將點擊事件直接綁定到a標(biāo)簽上敬锐。
- 引入fastclick庫背传。
修復(fù)之后的效果如下：
當(dāng)引入fastclick解決異常后，我猜想台夺，這個異常會不會是由iOS本身的原生點擊事件導(dǎo)致的径玖？如果您知道原因，希望不吝指教颤介，先謝過了梳星！
二折
在解決了上述問題后赞赖，接下來為了讓按鈕看著漂亮一些，我給每一頁的翻頁a標(biāo)簽加上背景圖并去掉文本內(nèi)容:
<a href="javascript:void(0);" class="next-btn"></a>
.next-btn {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -80px;
width: 160px;
height: 60px;
text-align: center;
background: url(./../images/btn-start.png) no-repeat;
background-size: contain;
}
這樣改動后冤灾，Android下仍沒有問題前域，但iOS下又出現(xiàn)了類似的異常：這次是直接點擊按鈕后，下一頁就會直接顯現(xiàn)出來而沒有滑動效果韵吨。匿垄。
在嘗試各種解決方法后，無意中發(fā)現(xiàn)学赛，在給a標(biāo)簽添加active選擇器后年堆，滑動效果正常吞杭，而且a標(biāo)簽的交互視覺效果似乎也更好了點盏浇。。什么鬼芽狗，問題是因此而解決了绢掰，但同上，原因還是不明童擎，研究中……
.next-btn:active {
background-image: url(./../images/btn-start-a.png);
}
效果如下：
三折
頁面總算可以一頁一頁地順利切換了滴劲，下面需要做的是一個轉(zhuǎn)盤抽獎，這里只展示簡化部分顾复。
// html
<div class="turntable">
<div class="lottery_btn">開始抽獎</div>
<div class="pointer"></div>
</div>
// css
.turntable .pointer {
...
-webkit-transition: -webkit-transform 2s ease-out;
transition: transform 2s ease-out;
...
}
// js
wrapper.on('click', '.next-btn', function(e) {
toNextPage(e)
}).on('click', '.lottery_btn', function(e) {
var rotate = 'rotate3d(0, 0, 1, ' + (360*4+45) + 'deg)';
$('.pointer').css({
'-webkit-transform': rotate,
'transform': rotate
})
// 由于我上面設(shè)置的rotate過渡時間是2秒班挖，所以在此處寫的是2.2秒后進入抽獎結(jié)果頁。
setTimeout(function() {
toNextPage(e)
}, 2200)
})
首先我的想法很簡單芯砸，就是讓轉(zhuǎn)盤的指針根據(jù)結(jié)果在兩秒內(nèi)轉(zhuǎn)動四圈以上最終落在獎品上萧芙，與此同時，抽獎結(jié)果頁再緊接著滑動出來假丧。但結(jié)果卻還是出乎意料：
轉(zhuǎn)盤指針確實可以正常落在獎品上双揪，但在iOS下只轉(zhuǎn)動了不到半圈。
既然問題出在了轉(zhuǎn)動上包帚，首先想到是不是需要給轉(zhuǎn)動指針的父元素div.turntable添加transform-style以及perspective等屬性渔期，但發(fā)現(xiàn)添加后還是同樣的效果。再聯(lián)想到可能是rotate3d方法的支持性問題渴邦，于是換做rotateZ方法疯趟，轉(zhuǎn)動正常。谋梭。也就是只做了下面的變動：
var rotate = 'rotateZ(' + degree + 'deg)';
當(dāng)轉(zhuǎn)盤指針剛停止?jié)L動的時候迅办，在iOS下抽獎結(jié)果頁直接顯現(xiàn)出來，和一二折中遇見的情況很是相似章蚣。站欺。
從上面的代碼可以看出姨夹，我其實是想用setTimeout控制指針旋轉(zhuǎn)動畫結(jié)束后的下一步動作，問題其實也是出在了這個里面矾策。說白了磷账，如果有一個可以監(jiān)聽動畫結(jié)束的事件，而將下一步操作放在該事件處理程序中豈不OK贾虽？果不其然逃糟，當(dāng)通過監(jiān)聽transitionend事件來處理后，一切正撑罨恚……
$('.pointer').css({
'-webkit-transform': rotate,
'transform': rotate
}).on('transitionend', function() {
toNextPage(e)
});
小結(jié)
其實上面寫了這么多绰咽，總結(jié)起來無非這兩個問題：
- 在iOS下使用transform: rotate3d()制作旋轉(zhuǎn)動畫效果時，iOS會以最快捷的路徑從起始角度旋轉(zhuǎn)至終止角度地粪，因此旋轉(zhuǎn)角度不會超過180deg取募。所以如果要連續(xù)平滑的從起始角度過渡到終止角度，建議使用rotateX()蟆技、rotateY()和rotateZ()代替玩敏。
- 某些情況下（應(yīng)該不限于上面三種情況），在iOS中將一個元素的display屬性從none設(shè)置為block后质礼，緊接著為其添加基于transition 和 translate 的動畫效果時旺聚，動畫效果失效。失效原因暫不明確眶蕉。砰粹。繼續(xù)研究中。
能力和條件有限造挽，總結(jié)和測試或許都有很大不足碱璃！這是demo地址 ，如果您有什么想法刽宪，希望不吝賜教厘贼！
最后附上完整效果圖：
