要素の高さを指定するせずにアニメーションがついたアコーディオンを作成するテクニック 『CSS3 Accordion』

Tweet

237

CSS3 Accordion Test (No ‘height: auto’ transition)
By Diego Pardo

開閉の動作は、CheckBoxやjavascriptを使ったものではなく、focusを使ったのも特徴的

heightの高さの変化をtransitionで変化させたのではなく、marginの方を変化させています

このCSSのmargin-top: -100%;と

.acc-panel {
  padding: 1.5em;
  position: relative;
  float: left;
  clear: both;
  margin-top: -100%;
  z-index: 1;
  transition: all 1.2s ease;
}

このCSSのoverflow: hidden;がポイント

.accordion > ul > li {
  display: block;
  position: relative;
  margin-bottom: -1px;
  overflow: hidden;
  color: #486992;
  background: #fafafa;
  border: 1px solid #D1D1D1;
}

heightも、jQueryのslidToggleも使わずにこういった使い方でアニメーション化出来るのはいいですね

コードをダウンロード

Tweet

短縮URL:

2014年05月20日 WEB制作系 コード・プラグイン CODECodePen