3

Я хотел бы использовать эту красивую SVG-анимацию, размещенную на CodePen, но я не могу понять, как запустить или перезапустить анимацию:

https://codepen.io/elevaunt/pen/JYRBzJ

У кого-нибудь есть идея, как можно скрыть анимацию, а затем показать и активировать ее одним нажатием кнопки?

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  &.circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
}

p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
  &.success {
    color: #73AF55;
  }
  &.error {
    color: #D06079;
  }
}


@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

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

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<p class="success">Oh Yeah!</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg>
<p class="error">Bummer!</p>

У кого-нибудь есть идея, как можно скрыть анимацию, а затем показать и активировать ее одним нажатием кнопки?

Свободный перевод вопроса Start/Stop SVG Animation от участника @iSofia.

1

1 ответ 1

2

Пример в Codepen использует stroke-dasharray: 1000;

Это может создать вам проблемы, так как значение взято наугад.

Значение stroke-dasharray должно быть равно длине пути.

Я пересчитал длину путей, однако я придерживаюсь той же продолжительности анимации. Вы можете изменить время на что-то другое.

Также: checkboxes видны, но на практике вы скрываете эти checkboxes. Я добавил границу к элементу svg, чтобы было понятно, где вы должны нажать.
На практике я бы использовал другой путь, возможно, светло-серый под анимированным путем.

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}


.path.circle {
  stroke-dasharray: 390.2px;
  stroke-dashoffset: 390.2px;
  transition: stroke-dashoffset .9s ease-in-out;
  
}
.path.line {
  stroke-dasharray: 82.033px;
  stroke-dashoffset: 82.033px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
.path.check {
  stroke-dasharray: 99.21px;
  stroke-dashoffset: 99.21px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
}
p.success {
  color: #73af55;
}
p.error {
  color: #d06079;
}


svg{border:1px solid}

#a:checked + svg  .path.circle{stroke-dashoffset: 0;}
#a:checked + svg  .path.check{stroke-dashoffset: 0;}


#b:checked + svg  .path.circle{stroke-dashoffset: 0;}
#b:checked + svg  .path.line{stroke-dashoffset: 0;}
<label>
  <input id="a" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline  class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg></label>

<p class="success">Oh Yeah!</p>



<label><input id="b" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <line class="path line" id="kk" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg></label>

Как я уже говорил на практике, я бы использовал другой путь, возможно, светло-серый под анимированным путем. Для этого я сохраняю пути в элементе <defs> и использую эти элементы с <use>

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}


.path.circle {
  stroke-dasharray: 390.2px;
  stroke-dashoffset: 390.2px;
  transition: stroke-dashoffset .9s ease-in-out;
  
}
.path.line {
  stroke-dasharray: 82.033px;
  stroke-dashoffset: 82.033px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
.path.check {
  stroke-dasharray: 99.21px;
  stroke-dashoffset: 99.21px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
}
p.success {
  color: #73af55;
}
p.error {
  color: #d06079;
}

.base{fill:none;stroke:#d9d9d9;stroke-width:6;stroke-miterlimit:10;stroke-linecap:round;}


#a:checked + svg  .path.circle{stroke-dashoffset: 0;}
#a:checked + svg  .path.check{stroke-dashoffset: 0;}


#b:checked + svg  .path.circle{stroke-dashoffset: 0;}
#b:checked + svg  .path.line{stroke-dashoffset: 0;}
<label>
  <input id="a" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <defs>
   <circle id="c"  cx="65.1" cy="65.1" r="62.1"/>
   <polyline id="py" fill="none" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>    
  </defs>
  <g  class="base">
  <use xlink:href="#c"/>
  <use xlink:href="#py"/>
  </g>
  <g fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10">
  <use class="path circle" xlink:href="#c"/>
  <use class="path check" xlink:href="#py"/>
  </g>
  </svg></label>

<p class="success">Oh Yeah!</p>



<label><input id="b" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <defs>
  <line id="l1" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line id="l2" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
  </defs>
  
  <g class="base">
  <use xlink:href="#c"/>
  <use xlink:href="#l1"/>
  <use xlink:href="#l2"/>
  </g>
  
  
  <g fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round">
  <use class="path circle" xlink:href="#c"/>
  <use class="path line" xlink:href="#l1"/>
  <use class="path line" xlink:href="#l2"/>
  </g>
</svg></label>
  

<p class="error">Bummer!</p>

Свободный перевод ответа от участника @enxaneta.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.