css - 为虚线对 Angular 线设置动画

Question

我用了 Animate diagonal line query它完美地工作。

我试图设计线条的样式，以便可以将其设为点线或虚线，而不是一条实线。我试过点线和虚线边框属性，但它们只更改外边框而不是线本身。

如有任何建议，我们将不胜感激。

Answer 1

我建立了 cocoa 的评论。使用 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; }
}