带有关键帧和 css 变量的 stroke-dashoffset 动画答案

【问题标题】：stroke-dashoffset animation with keyframes and css variables带有关键帧和 css 变量的 stroke-dashoffset 动画
【发布时间】：2019-03-04 14:08:09
【问题描述】：

要么我疯了，要么我发现关键帧和 svg 动画很奇怪。我只是在一个圆圈周围制作一个 SVG 笔画动画，实际上创建了一个动画百分比刻度盘。

只要我在混合中添加一个 CSS 变量，关键帧动画就不会动画 - 它只是跳转到最终状态。

这是我的 PEN 演示： https://codepen.io/tateman66/pen/ePYZmx

document.getElementById('btn').addEventListener('click', function(){
  
  var percent = document.getElementById('percent').value;
  document.querySelector('.left').style.setProperty('--leftPercent', percent);
});

svg {
  height: 200px; width: 200px; --leftPercent: 300;
}

.center { fill: #6d6e71; }
.stroke { 
  stroke: rgba(109,110,113, .75); 
  fill: none; 
  stroke-dasharray: 300;
  stroke-dashoffset: var(--leftPercent);
  animation: left 5s ease-in forwards;
  //transition: stroke-dashoffset 2s;
}

@keyframes left {
  to { stroke-dashoffset: var(--leftPercent); }
}

<svg viewBox="0 0 100 100" class="left">
  <circle class="center" cx="50" cy="50" r="25"></circle>
  <circle class="stroke" cx="50" cy="50" r="45" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300"></circle>
</svg>

<br><br>
<input type="text" id="percent" value="300" />
<button id="btn">Animate</button>

在文本框中输入 50 并单击动画。然后，翻转注释掉的行以使用动画而不是过渡并重新运行它。

带有过渡但不带有关键帧的动画。

有人看到里面有什么明显的东西吗？

谢谢

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

因为to 状态与from 状态相同所以没有动画。基本上，如果您不指定from，则将使用元素的初始值，并且该值也使用CSS 变量设置，如to。另一点是动画只会运行一次，因此即使您稍后更改它的某些状态，也不会触发动画再次运行。

您可以简单地考虑转换：

document.getElementById('btn').addEventListener('click', function(){
  
  var percent = document.getElementById('percent').value;
  document.querySelector('.left').style.setProperty('--leftPercent', percent);
});

svg {
  height: 200px; width: 200px; --leftPercent: 300;
}

.center { fill: #6d6e71; }
.stroke { 
  stroke: rgba(109,110,113, .75); 
  fill: none; 
  stroke-dasharray: 300;
  stroke-dashoffset: var(--leftPercent);
  animation: left 5s ease-in forwards;
  transition: stroke-dashoffset 2s;
}

<svg viewBox="0 0 100 100" class="left">
  <circle class="center" cx="50" cy="50" r="25"></circle>
  <circle class="stroke" cx="50" cy="50" r="45" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300"></circle>
</svg>

<br><br>
<input type="text" id="percent" value="300" />
<button id="btn">Animate</button>

【讨论】：