调整对话框尺寸后stroke-dashoffset实现的SVG动画不流畅如何解决

问题根源 #

你当前的stroke-dasharray和stroke-dashoffset取值错误，你填的976是矩形宽+高的和，而描边动画需要的取值是矩形的完整周长，值偏小导致虚线长度不足，动画播放到一半就没有后续描边内容，因此出现卡顿、不流畅的观感。

修复方案 #

方案1：手动计算周长赋值 #

带圆角的矩形周长计算公式为：

周长 = 2*(宽度 + 高度) - 8*圆角半径 + 2*π*圆角半径

代入你当前rect的参数（宽600、高376、圆角半径3），计算得周长约为1947，直接替换对应取值即可：
修正后的CSS代码：

#modal-close-default {
    .uk-modal-dialog.custom-modal {
        /* 原有样式保留 */
    }
    .modal-svg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 3px;
        rect {
            stroke: #fff;
            stroke-width: 2px;
            stroke-dasharray: 1947; /* 替换为计算后的周长 */
            stroke-dashoffset: 1947;
            will-change: stroke-dashoffset; /* 可选，开启GPU加速提升流畅度 */
        }
    }
    &.uk-open>.uk-modal-dialog.custom-modal {
        /* 原有样式保留 */ 
        .modal-svg {
            rect {
                animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
            }
        }
    }
}

@keyframes sketchIn {
    0% {
        stroke-dashoffset: 1947; /* 替换为计算后的周长 */
    }
    100% {
        stroke-dashoffset: 0;
    }
}

方案2：JS动态获取周长（自适应宽高变化） #

如果后续会频繁调整对话框尺寸，建议用JS自动获取rect周长，不需要每次手动计算：

const modalRect = document.querySelector('.modal-svg rect')
const perimeter = modalRect.getTotalLength()
modalRect.style.setProperty('--stroke-perimeter', `${perimeter}px`)

对应CSS直接调用变量即可：

rect {
    stroke: #fff;
    stroke-width: 2px;
    stroke-dasharray: var(--stroke-perimeter);
    stroke-dashoffset: var(--stroke-perimeter);
}
@keyframes sketchIn {
    0% {
        stroke-dashoffset: var(--stroke-perimeter);
    }
    100% {
        stroke-dashoffset: 0;
    }
}

内容的提问来源于stack exchange，提问作者Kaung Khant Zaw