Auf Klick-Trigger nicht volle Animation

Question

Ich trigger ein Svg checmark mit einer Taste. Die Art, wie ich es mache, setzt das Häkchen auf opacity:0; und dann, wenn die Schaltfläche geklickt wird, fügen Sie eine Klasse fadeIn hinzu und setzen Sie die Deckkraft auf opacity:1;.

Mein Problem ist, wenn die Deckkraft auf 0 eingestellt ist die Animation geändert wird. Die vollständige Animation wird nicht angezeigt. Sie können dies sehen, indem Sie die opacity:0 aus der Chechmark-Klasse nehmen und die Fiddle erneut ausführen.

Meine Frage ist, wie kann ich dieses Häkchen erhalten, um mit der Taste auszulösen/anzuzeigen, während die volle Animationssequenz beibehalten wird.

Here is a fiddle. Das Snippet erzeugt nicht das Häkchen, nicht sicher warum.

$('#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

Sie können dieses Problem beheben, die animation Regel auf den erforderlichen Elementen basierend auf der Zugabe der .fadeIn Klasse, indem Sie stattdessen nach der Aufgabe auf den Klassen die Elemente haben, wenn sie geladen werden. Versuchen Sie folgendes:

.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