LoginSignup
12

More than 5 years have passed since last update.

CSS3でフェードイン・フェードアウトするダイアログ

Posted at

概要

ボタンを押すとダイアログがフェードインで出現し、もう一度押すとフェードアウトで消えるコードのサンプルです。jQuery#show/hideではなく、CSS3のtransitionを使用しています。

動作環境

Chrome 51 で検証。
CSS transition http://caniuse.com/#feat=css-transitions

コード

  • class="fading-box"を指定した要素が fade-in/fade-out する
  • 上記の要素にvisibleクラスを追加・削除して表示・非表示を切り替え
  • フェードエフェクトは.fading-boxtransitionで変更

jsFiddle→ https://jsfiddle.net/noobar/hvbquqf9/3/

<!DOCTYPE html>
<html>
<head>
  <title>Fade Sample</title>
  <style>
  main {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: green;
  }

  #dialog {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 80px;
    background-color: orange;
  }

  /* Fading Effect - invisible state - */
  .fading-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  }

  /* Fading Effect - visible state - */
  .fading-box.visible {
    opacity: 1;
    visibility: visible;
  }

  </style>
</head>
<body>

  <main>
    <button id="button">Click me</button>
  </main>
  <div id="dialog" class="fading-box">
    Hi!
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$('#button').on('click', function() {
  $('#dialog').toggleClass('visible');
});
</script>
</body>
</html>

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12