为虚线对角线设置动画

Question

我用了 Animate diagonal line query 它完美无缺。

我试图对线条进行样式处理，以便我可以将其划线或虚线而不是一条实线。我尝试过虚线和虚线边框属性，但它们只改变外边框而不是线条本身。

任何建议都将不胜感激。

Answer 1

我建立了可可的评论。使用SVG绘制一条线，在顶部应用蒙版，然后为蒙版设置动画以显示该线。

http://codepen.io/anon/pen/qORzbe

<div class="box">
    <svg height="200" width="200" class="line1">
        <line fill="none" stroke="black" x1="0" y1="0" x2="200" y2="200" stroke-dasharray="5, 5" />
    </svg>
    <div class="mask"></div>
</div>

.box {
    overflow: hidden;
    outline: dotted 1px;
    width: 200px; 
    height: 200px;
    position: relative;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px; 
    height: 200px;
    z-index: 10;
    background-color: white;
    background-repeat: no-repeat;
    animation: showDiag 2s linear forwards;
}

@keyframes showDiag {
    from { left: 0; top: 0; }
    to { left: 200px; top: 200px; }
}