jqueryを@keyframesに変換2

jqueryを@keyframesに変換2

jqueryのfadeInしてfadeOutするソースを
jquery抜きで@keyframesに変換して
アニメーションを実現したいと考えています。

<style>
#display {
color: white;
background-color: black;
display: none;
}
</style>

<button type="button" id="button">button！</button>
<div id="display">fadeIn-fadeOut</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>

<script>
$('#button').on('click', function() {
$('#display').fadeIn("1000", function() {
$(this).delay(1000).fadeOut(1000);
});
});
</script>

ボタンを押すと
ふわっと現れてもとに戻って消えるやつです。


これを

<style>
#display {
color: white;
background-color: black;
}

.fadein {
animation: fadeInAnimate 1s;
animation-fill-mode: both;
}

@keyframes fadeInAnimate {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.fadeout {
animation: fadeOutAnimate 1s;
animation-fill-mode: both;
}

@keyframes fadeOutAnimate {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}
</style>

のようなCSSを使って

jquery抜きのJavaScript
と
css の @keyframes
で書くにはどのようにすればよいでしょうか？

No.1 ベストアンサー 回答者： fujillin 回答日時： 2019/08/13 12:40

こんにちは

連続してアニメーションをおこないたいのなら、前回質問のBAの処理で、webkitAnimationEndでクラス名を切り替えればよいだけです。

でも、必ず連続させるというのであれば、アニメーションの設定をそのようにしておく方が、切り替えとか連続とかを考える必要もなくなるので、もっと簡単にできるでしょう。

@keyframes fadeInOut {
0% { opacity: 0; }
50%{ opacity: 1; }
100% { opacity: 0; }
}

この回答へのお礼

回答ありがとうございます。

<style>
#display {
color: white;
background-color: black;
display: none;
}
.fadeinout {
animation: fadeInOutAnimate 2s;
}

@keyframes fadeInOutAnimate {
0% { opacity: 0; }
50%{ opacity: 1; }
100% { opacity: 0; }
}
</style>

<button type="button" id="button">button！</button>
<div id="display">fadeIn-fadeOut</div>

<script>
var elm = document.getElementById('display');
elm.addEventListener('webkitAnimationEnd', function(){
elm.classList.remove('fadeinout');
elm.style.display = 'none' ;
});

document.getElementById("button").onclick = function() {
elm.style.display = 'block' ;
elm.classList.add('fadeinout');
};
</script>

こんな感じでしょうか？

うまくできてますか？

お礼日時：2019/08/13 13:43