클릭 트리거가 전체 애니메이션을 유지하지 않음

Question

버튼이있는 svg checmark가 트리거됩니다. 내가하고있는 방식은 opacity:0;으로 체크 표시를 설정하고 버튼을 클릭하면 클래스 fadeIn을 추가하고 불투명도를 opacity:1;으로 설정합니다.

내 문제는 불투명도가 0으로 설정된 경우 애니메이션이 변경된 경우입니다. 전체 애니메이션이 표시되지 않습니다. chechmark 클래스에서 opacity:0을 가져 와서 다시 피들을 실행하면이 사실을 알 수 있습니다.

내 질문에 전체 애니메이션 시퀀스를 유지하면서 버튼으로 트리거/표시하도록하려면이 체크 표시를 어떻게 얻을 수 있습니까?

Here is a fiddle. 스 니펫이 체크 표시를 표시하지 않고 이유를 모르겠습니다.

$('#trigger').on('click', function() { 
 
\t $('.checkmark').addClass('fadeIn'); 
 
});

.checkmark { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    stroke-width: 5; 
 
    stroke: #fff; 
 
    stroke-miterlimit: 10; 
 
    margin: 10% auto; 
 
    box-shadow: inset 0px 0px 0px #0783a7; 
 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
 
    opacity: 0; 
 
    z-index: 2; 
 
} 
 
.checkmark-circle { 
 
    stroke-dasharray: 166; 
 
    stroke-dashoffset: 166; 
 
    stroke-width: 5; 
 
    stroke-miterlimit: 10; 
 
    stroke: #0783a7; 
 
    fill: none; 
 
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
 
} 
 
.checkmark-check { 
 
    transform-origin: 50% 50%; 
 
    stroke-dasharray: 70; 
 
    stroke-dashoffset: 70; 
 
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
 
} 
 

 
@keyframes stroke { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes scale { 
 
    0%, 100% { 
 
    transform: none; 
 
    } 
 
    50% { 
 
    transform: scale3d(1.1, 1.1, 1); 
 
    } 
 
} 
 
@keyframes fill { 
 
    100% { 
 
    box-shadow: inset 0px 0px 0px 100px #0783a7; 
 
    } 
 
} 
 

 

 
.fadeIn { 
 
    opacity: 1; 
 
    transition: all 0.8s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="trigger">Trigger</button> 
 
<div id="wrap"> 
 
    <div id="checkmark-text">All Templates Selected</div> 
 
    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> 
 
    <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/> 
 
    <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> 
 
    </svg> 
 
</div>

Answer 1

당신은 .fadeIn 클래스의 추가에 따라 필요한 요소에 animation 규칙을 실행하는 대신에 그들이로드 할 때 요소가있는 클래스에 배치하여이 문제를 해결할 수 있습니다. 이 시도 :

.checkmark { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    display: block; 
    stroke-width: 5; 
    stroke: #fff; 
    stroke-miterlimit: 10; 
    margin: 10% auto; 
    box-shadow: inset 0px 0px 0px #0783a7; 
    z-index: 2; 
    opacity: 0; 
} 
.checkmark-circle { 
    stroke-dasharray: 166; 
    stroke-dashoffset: 166; 
    stroke-width: 5; 
    stroke-miterlimit: 10; 
    stroke: #0783a7; 
    fill: none; 
} 
.checkmark-check { 
    transform-origin: 50% 50%; 
    stroke-dasharray: 70; 
    stroke-dashoffset: 70; 
} 

.checkmark.fadeIn { 
    opacity: 1; 
    transition: all 0.8s ease; 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
} 
.checkmark.fadeIn .checkmark-circle { 
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
} 
.checkmark.fadeIn .checkmark-check { 
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
} 

@keyframes stroke { 
    100% { 
     stroke-dashoffset: 0; 
    } 
} 

@keyframes scale { 
    0%, 
    100% { 
     transform: none; 
    } 
    50% { 
     transform: scale3d(1.1, 1.1, 1); 
    } 
} 

@keyframes fill { 
    100% { 
     box-shadow: inset 0px 0px 0px 100px #0783a7; 
    } 
} 

Updated fiddle