詳しい人求む！

jqueryのhideとfadeInについて

解決済

質問者：JosephWalden
質問日時：2019/08/06 10:24
回答数：2件

jqueryのhideしてfadeInするソースを
jquery抜きで実現したいと考えています。

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

<button type="button" id="button">button！</button>
<div id="display">display</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></ …
<script>
document.getElementById("button").onclick = function() {
$('#display').hide().fadeIn(1000);
};
</script>

ボタンを押すと消えてそのあとふわっとしてもとに戻るやつです。

jquery抜きのJavaScript
もしくは
CSS
で書くにはどのようにすればよいでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： naktak
回答日時：2019/08/06 11:27

<style>

#display {
color: white ;
background-color: black ;
}
.fadein {
animation : fadeInAnimate 1s;
animation-fill-mode: both;
}
@keyframes fadeInAnimate {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
</style>

<button type="button" id="button">button！</button>
<div id="display">display</div>

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

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

- 0
- 件

通報する

この回答へのお礼

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

うまくばっちり動きます。

通報する

お礼日時：2019/08/13 11:06

参考程度に

No.1

回答者： fujillin
回答日時：2019/08/06 11:27

こんにちは

方法はいろいろあると思いますので、単純な一例です。
アニメーションそのものはCSSで行い、ボタンクリックに応じてアニメーションのスタイルを与えるスイッチはスクリプトから行っています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#display {
color: white ;
background-color: black ;
animation-duration:1s;
}

@keyframes fadeIn{
from { opacity:0; }
to { opacity:1; }
}
</style>
</head>
<body>

<button type="button" id="button">button！</button>
<div id="display">display</div>

<script type="text/javascript">
document.getElementById("button").addEventListener("click",function(){
let s = document.getElementById("display").style;
s.animationName = "";
setTimeout(function(){ s.animationName = "fadeIn"; }, 5);
});
</script>
</body>
</html>