0

我的名字是 Daniel Gö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');
});
4

1 回答 1

0

在动画中包含多个属性，不要使用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
  }
}
于 2017-08-18T16:49:06.160 回答