javascript - 动画结束后 SVG 不会填充

Question

我叫 Daniel Götz，目前正在开发我的投资组合网站，但我遇到了一个问题。我的 SVG 动画一旦结束就不会填充。

我的网站:http://20162.hosts.ma-cloud.nl/portfoliowebsite/

如果向下滚动到名为“Mijn skills”的 H1，您可以看到正在动画处理的 Photoshop Logo 。但是我想在动画结束后填充。

动画结束后有什么方法可以让它充满吗？

HTML:

           <div class="photoshop">
  <svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
          </div>

CSS:

.photoshop {
height: 100px;
  width: 100px;
  opacity: 0;
}

.js-photoshop-animate{
  opacity: 1;
}

.rzzhgcav_0 {
  stroke-dasharray: 27046 27048;
  stroke-dashoffset: 27047;
  animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}


@keyframes rzzhgcav_draw_0 {
100% {
    stroke-dashoffset: 0;
  }
}

/* Style */
#mySVG * {
  fill-opacity: 0;
  transition: fill-opacity 1s;
}

#mySVG finished * {
  fill-opacity: 1;
}

JavaScript:

var $photoshop = $('.photoshop');

$photoshop.waypoint(function(){

  console.log('Waypoint!');
  $photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'}   ); 

/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
  obj.el.classList.add('finished');
});

Answer 1

在你的动画中包含多个属性，去掉transition:

如果您省略要“运行”的属性，则各个属性动画的开始和结束可能会重叠 keyframe :

If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.

.rzzhgcav_0 {
  stroke-dasharray: 27046 27048;
  stroke-dashoffset: 27047;
  animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}

@keyframes rzzhgcav_draw_0 {
  0% {
    stroke-dashoffset: 27047;
    fill-opacity: 0
    animation-timing-function: ease-in-out
  }
  50% {
    fill-opacity: 0
    animation-timing-function: linear
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1
  }
}