画像の重なりをユーザーの操作により解除できる方法はないか。 vue.js

Question

Vue.js で、図のような機能を実装したいです。
この機能を実装する方法がわからないので質問させて頂きます。

❶の状態では、3枚のdiv要素が重なって並んでいます。
奥に行くほど最初の幅は短くなっていますが、高さは全て同じです。

❶の状態で最も手前の要素を下にスクロールすると、下に移動し、
div 1要素+α分だけ　スクロールした段階で次の要素も続いて　幅を100%にしつつ下に移動させ、
❸までの機能を実装させたいです。

当初の考えとしては、
(1)　十分スクロールできるよう、全体の高さを確保する
(2) 最も手前の要素を可動、それ以外を固定に設定
(3) スクロールした量を取得し、1枚の高さ+α　移動した際に、次の要素に可動かつ幅を100%に設定したclassを与える

といった流れを想定しています。ここでいうスクロールとは、
画面をスクロールして (つまり、ユーザーは画面を指で上に弾いて)下を見るという事ではなく、
水色の要素を下に弾いて移動させる、というイメージです。(スクロール、以外に適当な表現があれば教えてください。これが分からないので、自力で調べるのに限界があります)

---

ソースを表示します。
現時点では、手前の　.coupon_areaをtouchmoveすると position:absoluteを外せるように設定したつもりです。
しかし、absoluteが消えるどころか3つのli要素自体が全て消えてしまいます。これの原因も分からないです。

<!-- thanks表示、announce非表示　OK -->
<template>
  <div class="content_wapper">

    <div class="content_inner">

      <div class="member_barcode_area coupon_area">
        <p>テキスト</p>
        <div class="barcode"></div>
      </div>

      <div class="thanks_text_area" v-if="coupondAllSlided" v-bind:class="{show: coupondAllSlided}">
        <p>テキスト</p>
        <div class="button_area">
          <button class="type1">テキスト</button>
        </div>
        <p class="coupon_list_header">テキスト</p>
      </div>
  
      <ul class="coupon_list">
        <li class="coupon_area hasImg back" v-if="couponIsSliding" v-bind:class="{notSlided: couponIsSliding}">
        </li>

        <li class="coupon_area hasImg between" v-if="couponIsSliding" v-bind:class="{notSlided: couponIsSliding}"> 
        </li>

        <li class="coupon_area front" v-on:touchmove="slide" v-if="couponIsSliding" v-bind:class="{notSlided: couponIsSliding}">     
        </li>

      </ul>
    </div>
  </div>
</template>

<script type="text/javascript" src="../assets/js/jsfile.js"></script>

<style scoped src="../assets/css/cssfile.css"></style>

@import "variables";

.content_wapper {

  .content_inner {
    margin: 0 0.2rem 0 0.2rem;
    width: calc(100vw - (0.2rem * 2));

    .member_barcode_area{

      p{
        text-align: center;
        margin: 0.5rem 0;
        font-size: 1.1rem;

        &::before,&::after{
          content: '';
          background-color: #000;
          vertical-align: middle;
          display: inline-block;
          background-repeat: no-repeat;
          width: 15px;
          height: 15px;
          background-size: contain;
          margin-bottom: 3px;
          margin-right: 1px;
          margin-left: 1px;
        }
      }

      .barcode{
        width: 17rem;
        height: 5rem;
        background-color: #000;
        margin-left: auto;
        margin-right: auto;
      }
    }

    .thanks_text_area {
      margin: 2rem 0;
      text-align: center;

      .coupon_list_header {
        margin-top: 2rem;
      }

      .show {
        visibility: show;
      }
    }

    .coupon_list {
      position: relative;

      .coupon_area {
        height: 14rem;
        left: 50%;
        transform: translateX(-50%);

        &.notSlided {
         position: absolute;
        }

        &.back {
          width: 80%;
        }

        &.between {
          width: 90%;
          z-index: 1;
          top: 2rem;
        }

        &.front {
          width: 95%;
          z-index: 2;
          top: 4rem;
        }
      }
    }

    .coupon_area {
      position: relative;
      border: #0F70AA 2px solid;
      background-color: #E0F3FF;
      height: 8rem;
      padding: 0.5rem 0.5rem 0.1rem 0.5rem;
      margin: 0.5rem 0;
      color: #484848;

      .coupon_title {

        .new {
          display: inline-block;
          height: 1.5rem;
          line-height: 1.5rem;
          width: 3.5rem;
          text-align: center;
          color: #ffffff;
          background-color: #FF0000;
          margin-right: 0.5rem;
          border-radius: 15px;
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
        }
      }

      .discount_text {
        font-size: 2.5rem;
        font-weight: bold;
        text-align: center;
        color: $BASE_COLOR;
      }

      .deadline_area {
        font-weight: 400;
        width: 10rem;
        text-align: center;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;

        p {
          font-size: 0.9rem;

          &:first-child{
            padding-bottom: 0.2rem;
          }
        }
      }

      .announce_area {
        background-color: $BASE_COLOR;
        text-align: center;
        vertical-align: middle;
        margin: 1rem auto 0 auto;
        color: $LABEL_COLOR;
        width: 50%;
        height: 3rem;
        border-radius: 0.3rem;
        position: fixed;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          right: -9px;
          top: 15px;
          border-left: 10px solid $BASE_COLOR;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }

        p {
          line-height: 1rem;
          padding-top: 0.5rem;
        }
      }

      .arrow {
        float: right;
        background-image: url(../img/down-arrow.png);
        position: absolute;
        right: -3rem;
        top: 0;
        background-repeat: no-repeat;
        background-size: 30px 53px;
        width: 2rem;
        height: 5rem;
      }

      .per_coupons {
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        margin-top: 1rem;
      }

      .button_area {
        width: 4.5rem;
        position: absolute;
        right: 3px;
        bottom: 3px;
      }

      &.hasImg {

        .img_area {
          width: 5.5rem;
          height: 5.5rem;
          background-color: #000;
          float: left;
          display: inline-block;
        }

        .coupon_text_area {
          margin-left: 0.5rem;
          display: inline-block;
          width: calc(100% - (5.5rem + 1rem));

          .coupon_title {
            height: 1.2rem;
          }

          .coupon_detail {
            margin: 0.5rem 0 0 0;
            line-height: 1.2rem;
            font-weight: 200;
            height: 3rem;
            font-size: 0.8rem;
          }
          .deadline_area {
            text-align: left;
            margin: 0;

            p.large {
              font-size: 2rem;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

Answer 1

hammer.jsを使うと上下左右のスワイプ情報が取得できるので下スワイプのときにKei344さんのコードが実行されるようにしたらいいかと思います。
http://masarufuruya.hatenadiary.jp/entry/2018/01/24/150147

Comments

[yzmw131321]

ありがとうございます。
提示して頂いたhammer.jsは　jqueryで動くんですよね?

vue.jsとは共存できないようなので、スワイプイベントの取得はvueのチュートリアルに従ってやろうと思います。　それに対して各要素に、transformするclassを付与すれば良いという事ですよね。

[keisukeh]

hammer.jsはjQueryに依存していませんよ。

[keisukeh]

考え方的には下スワイプを検知した後jsなりcssなりでアニメーションさせればいいと思います。

Answer 2

こういうことをしたいのでしょうか。

<input type="radio" name="on" checked>
<input type="radio" name="on">
<input type="radio" name="on">
<div>1</div>
<div>2</div>
<div>3</div>

div {
  width: 90vw;
  height: 60vh;
  position: relative;
  margin: 0 5vw;
  transition: all 1s;
}
div:nth-of-type(1) {
  background-color: #a55;
  transform: translateY(-4vw) scale(.9);
}
div:nth-of-type(2) {
  background-color: #5a5;
  transform: translateY(-65vh) scale(.95);
}
div:nth-of-type(3) {
  background-color: #55a;
  transform: translateY(-120vh);
}

input {
  margin-bottom: 3vw;
}

input:nth-of-type(2):checked ~ div:nth-of-type(1) {
  transform: translateY(-3vw) scale(.95);
}
input:nth-of-type(2):checked ~ div:nth-of-type(2) {
  transform: translateY(-60vh) scale(1);
}
input:nth-of-type(2):checked ~ div:nth-of-type(3) {
  transform: translateY(-60vh);
}

input:nth-of-type(3):checked ~ div:nth-of-type(1) {
  transform: translateY(0) scale(1);
}
input:nth-of-type(3):checked ~ div:nth-of-type(2) {
  transform: translateY(0) scale(1);
}
input:nth-of-type(3):checked ~ div:nth-of-type(3) {
  transform: translateY(0);
}
```**動くサンプル：**[https://jsfiddle.net/buLdg1hf/](https://jsfiddle.net/buLdg1hf/)

Comments

[yzmw131321]

動作は似ています。
inputではなく、手前の物をドラッグした時に他の2枚も連動して動かせたいです

[kei344]

「タッチのとき」にクラスを追加するように書き換えれば近い動きは出来ると思いますよ。