Старт / Стоп SVG Анимация

Question

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

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

HTML

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

CSS

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

Q: Может ли кто-нибудь иметь представление о том, как можно скрыть анимацию, а затем показать и активировать ее одним нажатием кнопки?

Любая помощь очень ценится. ТИА!

Answer 1

Это мой ответ. В примере в Codepen используется stroke-dasharray:1000. Это может создать вам проблемы. Значение штрих-черты должно быть равно длине пути. Я пересчитал длину путей, однако я придерживаюсь того же времени. Вы можете изменить время на что-то другое.

Также: флажки видны, но на практике эти флажки скрыты.

Я добавил границу к элементу 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>

Answer 2

Вам нужно использовать JavaScript, чтобы показать и скрыть анимацию, просто добавив или удалив класс, содержащий вашу анимацию.

Как это сделать в JS: 1. Определите ваши глобальные переменные (кнопка для щелчка мышью).событие, элемент для анимации).2. Добавьте прослушиватель событий в функцию Button и callback, чтобы добавить или удалить класс CSS.3. Переключите класс CSS

. Это простой пример из W3SChools:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is a DIV element.
</div>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("mystyle");
}
</script>

</body>
</html>