css display:none で transitionは効かないから、代わりにこうする。 | 岡田デザインラボ

- profile
- [OKADA LABO]は
  東京都世田谷区三軒茶屋を拠点とし、webサイト・ホームページ制作を中心に活動しております。
  
  また、紙媒体各種(パンフレット・チラシ・ポスター)や店舗サインなども得意です。
  
  経歴
  
  2003年〜2014年まで
  広告代理店にてデザイナー兼ディレクターとして
  紙媒体・WEB制作に携わってまいりました。
  
  2014年より独立
  多数の広告代理店様とお取引させていただいております。
  
  事務所：世田谷区三軒茶屋・下北沢
  TEL:03-6873-6291
- works
- Works
  
  その他の代理店様経由の制作実績については、お問い合わせいただければ、個別でご案内いたします。
- LABO
- LABO
  
  準備中
お問い合わせ

HOME
CSS

2021.04.07

CSS

css display:none で transitionは効かないから、代わりにこうする。

jsでclassを追加して、ふわっと要素を消したいとき

// display:block状態
.hoge{
visibility: visible;
    opacity: 1;
}


// ふわっとdisplay:none状態にする
.hoge.hide{
	transition: 1s;
    visibility: hidden;
    opacity: 0;
}