javascript - 对同一 CSS 动画的多个实例进行动画处理

Question

这里尝试对单个十字标记动画的三个实例进行动画处理。 如果我只有一个实例，交叉动画效果很好，但当我尝试创建多个实例时，我无法使其工作。另外，我找不到控制交叉动画的大小和位置的解决方案。我缺少什么？

这是我的尝试:(假设我想为第二个十字设置动画 - 触发器B)

$("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>

我想用这个:

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

Answer 1

$("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>

这是 CSS 问题。尝试用~来代替+

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