CSSアニメーションで表示および非表示

受付中プログラミング

2024-12-24

アンパンマンにあいさつ

私の目標は、HTML要素を表示および非表示にするときにアニメーションを作成することです。表示と非表示は、クラスの非表示を切り替えるボタンによってトリガーされます。


        const button = document.querySelector('button');
        const box = document.querySelector('.box');
        
        button.addEventListener('click', () => {
          box.classList.toggle('hide');
        })


        .box {
          width:200px;
          height: 200px;
          border: 1px solid #000;
          background-color: gray;
          margin: 0 auto;
          opacity: 1;
          display: block;  
        }
        
        .hide {
          display: none;
          transition: all 1s ease-out;
          opacity: 0;  
        }

回答一覧

使用しないアニメーションを使用したい場合はdisplay:none、を使用することができます


        const button = document.querySelector('button');
        const box = document.querySelector('.box');
        
        button.addEventListener('click', () => {
          box.classList.toggle('hide');
        })


        .box {
          width:200px;
          height: 200px;
          border: 1px solid #000;
          background-color: gray;
          margin: 0 auto;
          opacity: 1;
          transition: all 1s ease-out;
          visibility: visible;  
        }
        
        .hide {
          visibility: hidden;
          transition: all 1s ease-out;
          opacity: 0;  
        }

アンパンマンにあいさつ

非表示からを削除し、display: blockアニメーション化されたdiv showが必要な場合は、アニメーションも追加します。


        const button = document.querySelector('button');
        const box = document.querySelector('.box');
        
        button.addEventListener('click', () => {
          box.classList.toggle('hide');
        })


        .box {
          width:200px;
          height: 200px;
          border: 1px solid #000;
          background-color: gray;
          margin: 0 auto;
          opacity: 1;
          transition: all 1s ease-out;
          display: block;  
        }
        
        .hide {
          transition: all 1s ease-out;
          opacity: 0;  
        }

アンパンマンにあいさつ

ログインして回答する