動畫結束后，SVG不會填充

Question

我的名字叫DanielGötz，我目前正在我的投資組合網站上工作，但我遇到了問題。 我的SVG動畫結束后不會填充。

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

如果向下滾動到名為“ Mijn技能”的H1，則可以看到動畫的Photoshop徽標。 但是動畫結束后我想填充。

動畫結束后，有什么方法可以讓它填充嗎？

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 ：

如果省略了要“遍歷” 關鍵幀的屬性，則各個屬性動畫的開始和結束可以重疊：

如果未為關鍵幀指定屬性，或者指定了屬性但無效，則該屬性的動畫將像該關鍵幀不存在一樣繼續進行。

.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
  }
}