クリックトリガーで完全なアニメーションを保持しない

Question

ボタンでSVCマークをトリガーしています。私がやっているのは、チェックマークを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