Tinder風のUIをJavaScriptで実装する
https://codepen.io/developingidea/pen/meAIncodepen.io
こちらのコードを参考に学んでみた。
$(".buddy").on("swiperight",function(){ $(this).addClass('rotate-left').delay(700).fadeOut(1); $('.buddy').find('.status').remove(); $(this).append('<div class="status like">Like!</div>'); if ( $(this).is(':last-child') ) { $('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300); } else { $(this).next().removeClass('rotate-left rotate-right').fadeIn(400); } });
.rotate-left transform: rotate(30deg) scale(0.8); transition: 1s; margin-left: 400px; cursor: e-resize; opacity: 0; z-index: 10;
「右に400px,30度傾けて80%の大きさに変更する」を1秒かけて行うという処理
transform: rotate(30deg) scale(0.8); transition: 1s; margin-left: 400px;
- transition: 1sがないと一瞬で動いてしまう
やっていること
- rotate-leftで要素を傾ける
- delayとfadeOutで少し遅らせてフェードアウト(hide)する
- スワイプイベントはhammer.jsを使っている
思ったこと
Tinderのように左右のスワイプはこれで実現できる。 ただこれだと毎回同じ見た目のスワイプになってしまうので、 Yentaのようにドラッグしてどこかに飛ばすということは出来ないなぁ