前段时间多段自动展开（eg：红了！）火了，市面上也出现了各种版本（版本一、版本二、版本三等等）的多段自动展开，懂点君以及老铁在制作开发排版的过程中发现了一些问题，今天我们先来说说“自动展开的过程中会卡住，无法完全展开长图”的问题。

大家先打开查看如下案例，然后用你的手机或者电脑查看展开的情况，是否存在卡住的问题？是否存在无法完全展开的问题？

案例部分代码：

<section style="overflow: hidden;font-size: 0;line-height: 0;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君 | 懂点君学堂">
    <section style="height: 0;">
        <svg viewBox="0 0 750 1329" style="display: block;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/URGhbghw5oUvC3pPnmxQ9Yt38pslA6gC3v6VmPJoticRrAZmtWj993Uic60Cz0vYZB84vICGKRDVXaicETZpMc14A/0?wx_fmt=png) 0 0 / 100% auto no-repeat;WeChat: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;"></svg>
    </section>
    <svg powered-by="dong-dian-jun" style="display: inline-block;width: 100%;max-width: none !important;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 750 2">
        <animate attributeName="width" values="100%;5000%" dur="0.5s" begin="0s" fill="freeze" restart="never" calcMode="spline" keySplines="0.4 0 0.6 1"></animate>
        <animate attributeName="width" values="5000%;11050%" dur="0.5s" begin="1s" fill="freeze" restart="never" calcMode="spline" keySplines="0.4 0 0.6 1"></animate>
        <animate attributeName="width" values="11050%;16550%" dur="0.5s" begin="2s" fill="freeze" restart="never" calcMode="spline" keySplines="0.4 0 0.6 1"></animate>
        <!-- 此处省略代码 -->
    </svg>
</section>

点击查看多段自动展开的案例

案例显示效果：

没有打开看案例的童鞋，我们直接来看显示效果的截图。

分析问题原因：

多段自动展开是通过animate动画控制svg元素的width属性实现展开，当animate动画的values属性值（案例中是百分比的值）比较大时部分手机和电脑会发生卡住的现象。

大家可能还会想到是不是animate动画给svg元素设置的宽度太大导致卡住的问题呢？

一开始本君也是这么想的，经过写案例测试，否定了这个想法。测试的案例中，直接给svg元素设置width的值为66450%，让svg元素的高度达到长图的高度，完全撑开长图，因此我们只要查看长图是否显示完整，在这里点击查看案例。最终我们看到的长图是完整的，所以不是svg元素width的值太大导致的卡住问题。

解决卡住的问题：

问题我们是遇到了，但是怎么解决呢？我们可以通过调整svg元素的viewBox的值，把viewBox的第四个值调大，从而减小animate动画values属性的值，值减小了卡顿就不会发生了。

点击查看多段自动展开的案例

修改viewBox之前，animate的values属性值最大为66450%；修改viewBox之后，animate的values属性值最大为6645%。animate动画的values属性值明显缩小10倍，避免展开卡顿的问题。

多懂点，少吃亏！今天就分享到这里~