LoginSignup
9

More than 5 years have passed since last update.

マテリアルデザインのボタンアクション

Last updated at Posted at 2014-09-11

人のソースを見て勉強しようシリーズ第4弾
Material Action Button

今回の参考ソースはここ

sample4.gif

ソースをそのままコピペしたらjsdoitの方でちゃんと動作しなかったので、
少し書き直した。

html

<div class="icon">
  <i></i>
  <span class="tap"></span>
</div>

触れたときの波紋は.tapでほか3つの円や閉じるアイコン等については全部iでbefore/after要素作ったりして再現してる。

CSS

/* アイコンを中央に配置 */
.icon {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px;
  cursor: pointer;
}

/* ×の閉じるアイコンの実装(右斜め線) */
.icon i {
  width: 2px;
  height: 14px;
  display: block;
  background: #786699;
  position: absolute;
  top: 13px;
  left: 19px;
  opacity: 0;
  transform: rotate(45deg);
  transition: all 0.8s ease;
}

/* ×の閉じるアイコンの実装(左斜め線) */
.icon i:after {
  content: '';
  width: 14px;
  height: 2px;
  display: block;
  background: #786699;
  position: absolute;
  top: 6px;
  left: -6px;
}

/*左右の円生成 */
.icon:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  top: 15px;
  left: 15px;
  box-shadow: 14px 0px 0px #fff, -14px 0px 0px #fff; //ここで左右の円表示
  transition: all 0.4s ease;
  z-index: -1;
}

/* 中央の円生成 */
.icon:before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background: #fff;
  position: absolute;
  border-radius: 100%;
  transform: scale(0.25);
  transition: all 0.6s ease;
}

/* 触れたら中央の円を大きく */
.icon.active:before {
  transform: scale(1);
}

/* 左右の円を消す */
.icon.active:after {
  -webkit-box-shadow: 0px 0px 0px #fff, 0px 0px 0px #fff;
  box-shadow: 0px 0px 0px #fff, 0px 0px 0px #fff;
}
.icon.active i {
  opacity: 1;
  filter: none;
}

/* 触れたときの波紋 */
.tap {
  width: 80px;
  height: 80px;
  display: block;
  position: absolute;
  top: -20px;
  left: -20px;
  opacity: 1;
  filter: none;
  transform: scale(0);
  border-radius: 100%;
  background-color: rgba(255,255,255,0.6);
}
.tap.active {
  transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
  opacity: 0;
  transform: scale(1);
}

i で閉じるアイコンの×を再現(iで右斜め線、i:afterで左斜め線)
box-shadow: 14px 0px 0px #fff, -14px 0px 0px #fff; で両脇の円をまとめて生成してる。

JS

(function() {

  $(".icon").click(function () {
     $(this).toggleClass('active');
     $('.tap').addClass('active');
  });

  $(".icon").bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
    return $('.tap').removeClass('active');
  });

}).call(this);

触れたら .active を付ける処理。
CSS3のTransition終了時にJavaScriptで処理を走らせる場合は TransitionEnd を使う。
(クロスブラウザ対応はなくてもいけるかもだけど念のため。)

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
9