Анимация SVG stroke-dashoffset запускается (снова) при нажатии

Я сделал простую анимацию svg-stroke, используя css и jquery. Анимация запускается по клику. Но я не могу найти способ запустить его снова при втором нажатии (или третьем и т. д.). Я думаю, что решение довольно простое, но все равно ничего не работает (например, .addClass). Вот как это должно работать:
1. Обводка видна
2. Пользователь нажимает на изображение
3. Запускается анимация обводки
4. После завершения: обводка остается видимой
> 5. Пользователь нажимает снова
6. Анимация штриха начинается снова....

Это мой текущий код:

jQuery(document).ready(function () {

    $("#form").click(function () {

        var path1 = document.querySelector('#umriss');
        var length = path1.getTotalLength();
        
        $(path1).css("stroke-dasharray", length);
      
    
    });

});
body {
    width: 100%;
    font-size: 20px;
    background-color: #eee;
}

.wrapper {

    margin: 0 auto;
    text-align: center;
    max-width: 700px;
}

.bild{
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}

svg{
    position: absolute;
    height: 100%;
    width: 100%;
    left:0;
    top:0;
    
}

#umriss {
    stroke-dashoffset: 2600;
    animation: ani1 4s linear forwards;
}


@keyframes ani1 {
    to {
        stroke-dashoffset: 0;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Stroke</title>

</head>

<body>

    <div class="wrapper">
        <div class="bild">
            <svg id="form" x="0px" y="0px" width="812.959px" height="581.971px" viewBox="0 0 812.959 581.971" enable-background="new 0 0 812.959 581.971" xml:space="preserve">
                <path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454	       C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
	c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
	c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
	c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>

        </div>
    </div>
</body>

</html>


svg animation html jquery css
person jessy20    schedule 05.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я использую JQuery только для запуска анимации. Все остальное делается с помощью CSS. Я добавил флажок в вашем HTML, который управляет анимацией. Флажок виден, но вы можете скрыть его (видимость: скрытый или отображение: нет). Я надеюсь, что это то, чего вы хотите достичь.

$(label).click(function(){
    $(this).addClass("test");
});
body {
  width: 100%;
  font-size: 20px;
  background-color: #eee;
}

.wrapper {
  margin: 0 auto;
  text-align: center;
  max-width: 700px;
}

.bild {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
}

#umriss {
  stroke-dasharray: 2333.43;
  stroke-dashoffset: 2333.43;
} 
.test #umriss {  
  animation: ani1 4s linear forwards;}


[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
}

[type="checkbox"]:checked + label #umriss {
  animation: ani2 4s linear forwards;
}


@keyframes ani1 {
  from {
    stroke-dashoffset: 2333.43;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ani2 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 2333.43;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="wrapper">
        <div class="bild">
        <input type="checkbox" id="anim"/>
        <label for="anim" id="label">
            <svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
                <path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454	       C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
	c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
	c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
	c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
          </label>
        </div>
</div>

ОБНОВИТЬ

В CSS я использовал селектор :checked для запуска той или иной анимации.

Анимация без использования флажка:

В этом случае я использую событие click, чтобы добавить класс .test в сборку, и я использую событие animationend, чтобы удалить класс .test. Я надеюсь, что это помогает.

bild.addEventListener("click",()=>{
  bild.classList.add("test")
})


//umriss.addEventListener("webkitAnimationEnd",..... );
umriss.addEventListener("animationend",()=>{
  console.log("end")
  bild.classList.remove("test");
} );
body {
  width: 100%;
  font-size: 20px;
  background-color: #eee;
}

.wrapper {
  margin: 0 auto;
  text-align: center;
  max-width: 700px;
}

.bild {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
}

#umriss {
  stroke-dasharray: 2333.43;
  stroke-dashoffset: 0;
} 
.test #umriss {  
  animation: ani1 4s linear forwards;
}

@keyframes ani1 {
  from {
    stroke-dashoffset: 2333.43;
  }
  to {
    stroke-dashoffset: 0;
  }
}
 <div class="wrapper">
        <div id="bild">
            <svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
                <path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454	       C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
	c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
	c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
	c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
        </div>
</div>

person enxaneta    schedule 05.10.2018
comment
Во-первых: Спасибо за быстрый ответ! Можете ли вы объяснить мне, почему флажок необходим? Я попытался добавить класс к пути, но анимация не запускается. В вашем примере он отлично работает с флажком, но я бы хотел избежать этого, если это возможно. Также: возможно ли, что обводка уже видна в начале, при этом каждый щелчок запускает одну и ту же анимацию (в вашем примере обводка меняет направление с каждым щелчком (сначала: против часовой стрелки, затем: по часовой стрелке)) - person jessy20; 05.10.2018
comment
@ jessy20: я обновил свой ответ. Взгляни, пожалуйста - person enxaneta; 05.10.2018
comment
Большое спасибо enxaneta! Это именно то, что я искал :D - person jessy20; 05.10.2018