如何为矩形的对角线设置动画？

Question

我正在尝试对角线添加动画。我知道的矩形的高度和宽度（动态累加）。现在尝试从N到L，或从O到M或其他方式设置一条线的动画。 我尝试使用svg并增加了行的x1，y1，x2，y2，但这变得越来越复杂。任何更简单的解决方案？

Answer 1

您可以给行添加stroke-dashoffset并将其动画化为0。为计算stroke-dasharray和stroke-dashoffset的值，我使用了getTotalLength()方法来计算stroke-dasharray和stroke-dashoffset的值。希望对您有所帮助。

svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#om{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox = "0 0 100 70">  
  <rect x="10" y="10" width="80" height="50" />
  <line id="om" x1="90" y1="60" x2="10" y2="10" />
</svg>

这是两次动画，其中m变为o，l变为n：只需将x1的值更改为x2，反之亦然。 y也一样。这将改变线的方向。

svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#mo,#ln{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox = "0 0 100 70">  
  <rect x="10" y="10" width="80" height="50" />
  <!--<line id="om" x1="90" y1="60" x2="10" y2="10" />
  <line id="nl" x1="90" y1="10" x2="10" y2="60" />-->
  <line id="mo" x2="90" y2="60" x1="10" y1="10" />
  <line id="ln" x2="90" y2="10" x1="10" y1="60" />
</svg>

我对#om和#nl使用相同的动画

Answer 2

这是一个带有背景色的简单想法。您只需要增加background-size来画线：

.box {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    /*M - O*/
    linear-gradient(to top right,
      transparent calc(50% - 3px),red calc(50% - 2px),
      red calc(50% + 2px),transparent calc(50% + 3px)) top left,
      
    /*N - L*/  
    linear-gradient(to bottom right,
      transparent calc(50% - 3px),#000 calc(50% - 2px),
      #000 calc(50% + 2px),transparent calc(50% + 3px)) bottom left;
  background-repeat:no-repeat;
  background-size:0 0;
  transition:1s linear;
}
.box:hover {
  background-size:100% 100%;
}

<div class="box">

</div>

更改background-position即可更改动画开始：

.box {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    /*M - O*/
    linear-gradient(to top right,
      transparent calc(50% - 3px),red calc(50% - 2px),
      red calc(50% + 2px),transparent calc(50% + 3px)) bottom right,
      
    /*N - L*/
    linear-gradient(to bottom right,
      transparent calc(50% - 3px),#000 calc(50% - 2px),
      #000 calc(50% + 2px),transparent calc(50% + 3px)) top right;
  background-repeat:no-repeat;
  background-size:0 0;
  transition:1s linear;
}
.box:hover {
  background-size:100% 100%;
}

<div class="box">

</div>

更新

这里是不使用calc()的版本，它将与IE一起使用。找到正确的值会有些棘手，您将需要一个background-position动画，这也很棘手：

.box {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    /*M - O*/
    linear-gradient(to top right,
      transparent 176px,red 176px,
      red 181px,transparent 181px) left 200% top 200%,
      
    /*N - L*/
    linear-gradient(to bottom right,
      transparent 176px,black 176px,
      black 181px,transparent 181px) left -100% bottom -100%;
  background-repeat:no-repeat;
  background-size:200% 200%;
  transition:1s linear;
}
.box:hover {
  background-position:0 0,left 0 bottom 0;
}

<div class="box">

</div>

请查看此答案以获取有关不同值的更多详细信息：https://stackoverflow.com/a/51734530/8620333