Start/Stop SVG анимация

119

27 августа 2019, 10:20

Я хотел бы использовать эту красивую 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>

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

Answer 1

Пример в 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>