前段時(shí)間多段自動(dòng)展開（eg：紅了！）火了，市面上也出現(xiàn)了各種版本（版本一、版本二、版本三等等）的多段自動(dòng)展開，懂點(diǎn)君以及老鐵在制作開發(fā)排版的過程中發(fā)現(xiàn)了一些問題，今天我們先來說說“自動(dòng)展開的過程中會(huì)卡住，無法完全展開長圖”的問題。

大家先打開查看如下案例，然后用你的手機(jī)或者電腦查看展開的情況，是否存在卡住的問題？是否存在無法完全展開的問題？

案例部分代碼：

案例顯示效果：

沒有打開看案例的童鞋，我們直接來看顯示效果的截圖。

分析問題原因：

多段自動(dòng)展開是通過animate動(dòng)畫控制svg元素的width屬性實(shí)現(xiàn)展開，當(dāng)animate動(dòng)畫的values屬性值（案例中是百分比的值）比較大時(shí)部分手機(jī)和電腦會(huì)發(fā)生卡住的現(xiàn)象。

大家可能還會(huì)想到是不是animate動(dòng)畫給svg元素設(shè)置的寬度太大導(dǎo)致卡住的問題呢？

一開始本君也是這么想的，經(jīng)過寫案例測(cè)試，否定了這個(gè)想法。測(cè)試的案例中，直接給svg元素設(shè)置width的值為66450%，讓svg元素的高度達(dá)到長圖的高度，完全撐開長圖，因此我們只要查看長圖是否顯示完整，在這里點(diǎn)擊查看案例。最終我們看到的長圖是完整的，所以不是svg元素width的值太大導(dǎo)致的卡住問題。

解決卡住的問題：

問題我們是遇到了，但是怎么解決呢？我們可以通過調(diào)整svg元素的viewBox的值，把viewBox的第四個(gè)值調(diào)大，從而減小animate動(dòng)畫values屬性的值，值減小了卡頓就不會(huì)發(fā)生了。點(diǎn)擊查看多段自動(dòng)展開的案例修改viewBox之前，animate的values屬性值最大為66450%；修改viewBox之后，animate的values屬性值最大為6645%。animate動(dòng)畫的values屬性值明顯縮小10倍，避免展開卡頓的問題。

多懂點(diǎn)，少吃虧！今天就分享到這里~