1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

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のようにドラッグしてどこかに飛ばすということは出来ないなぁ