CODEWITHSUNDEEP
javascripthtmlcss
foxer
foxer

Reputation: 901

Animating multiple instances of the same CSS animation

Here is a try to animate three instances of a single cross mark animation. The cross animating works fine if I have only one instance but when I try to create more than one I fail to make it work. also, I can't find a solution to control the size and position of cross animations. What I'm missing?

Here is my attempt: (Let's say I want to animate the second cross - triggerB)

$("button").click(function(){
    $(".triggerB").toggleClass("drawn")
});
.container {
  width: 50%;
  max-width: 250px;
  margin: 0 auto;
}

.cross1{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.8s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.8s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.8s ease-out;
    -o-transition: stroke-dashoffset 1s 0.8s ease-out;
    transition: stroke-dashoffset 1s 0.8s ease-out;
}
.cross2{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
    -o-transition: stroke-dashoffset 1s 0.5s ease-out;
    transition: stroke-dashoffset 1s 0.5s ease-out;
}
.drawn + svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}

.triggerA {
  left:100px;
}

.triggerB {
  left:400px;
}
.triggerC {
  left:700px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="triggerA"></div>
<div class="triggerB"></div>
<div class="triggerC"></div>
  
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">

<polyline class="cross1 path" style="fill:none;stroke:#fc1c03;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,24.5 24.5,12.5 "/>
  
  <polyline class="cross2 path" style="fill:none;stroke:#fc0303;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,12.5 24.5,24.5 "/>
</svg>
  
</div> 
<button>go/reset</button>

I want to use this:

$("button").click(function(){
    $(".triggerA").toggleClass("drawn")
    $(".triggerB").toggleClass("drawn")
    $(".triggerC").toggleClass("drawn")
});

Upvotes: 0

Views: 208

Answers (1)

rangerz
rangerz

Reputation: 605

$("button").click(function(){
    $(".triggerB").toggleClass("drawn")
});
.container {
  width: 50%;
  max-width: 250px;
  margin: 0 auto;
}

.cross1{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.8s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.8s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.8s ease-out;
    -o-transition: stroke-dashoffset 1s 0.8s ease-out;
    transition: stroke-dashoffset 1s 0.8s ease-out;
}
.cross2{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
    -o-transition: stroke-dashoffset 1s 0.5s ease-out;
    transition: stroke-dashoffset 1s 0.5s ease-out;
}
.drawn ~ svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}

.triggerA {
  left:100px;
}

.triggerB {
  left:400px;
}
.triggerC {
  left:700px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="triggerA"></div>
<div class="triggerB"></div>
<div class="triggerC"></div>
  
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">

<polyline class="cross1 path" style="fill:none;stroke:#fc1c03;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,24.5 24.5,12.5 "/>
  
  <polyline class="cross2 path" style="fill:none;stroke:#fc0303;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	 12.5,12.5 24.5,24.5 "/>
</svg>
  
</div> 
<button>go/reset</button>

This is CSS issue. Try to use ~ to replace +

.drawn ~ svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}

Upvotes: 1

Related Questions