Edited at

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

More than 3 years have passed since last update.

人のソースを見て勉強しようシリーズ第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 を使う。

(クロスブラウザ対応はなくてもいけるかもだけど念のため。)