[Vue.js] transition-group 양방향 slide navigation 구현

transition-group을 이용해 왼쪽에서 오른쪽으로 slide 되는 것뿐만 아니라,

오른쪽에서 왼쪽으로도 slide 되며 넘어갈 수 있도록 만들려고 합니다.

carousel을 설치하지 않고, navigation을 구현하겠습니다.

(vue 2 버전)

 

---

 

1. HTML

<section class="body">
  <div class="btn-area">
    <a class="btn" :class="{ 'no-cursor': key === 0 }" @click="goPrev()"></a>
  </div>

  <transition-group tag="div" name="slide" class="info-slide">
      <div class="info-area">
        <p class="title">{{ infoList[key].title }}</p>
      </div>
    </div>
  </transition-group>

  <div class="btn-area next">
    <a 
        class="btn next-btn" 
        :class="{ 'no-cursor': key === this.infoList.length - 1 }" 
        @click="goNext()"
    ></a>
  </div>
</section>

- body class 안에 이전 버튼, 슬라이드될 내용이 담긴 transition-group, 다음 버튼을 넣었습니다.

- 트랜지션은 slide로 할 것이기 때문에 name에 slide를 적었습니다.

 

- 'no-cursor'은 css에서 손가락 모양 커서를 제거하기 위해 넣어둔 class입니다.

- a 태그 버튼들은 background-image를 이용해서 이미지 버튼으로 만들었습니다.

 

 

2. Javascript

.
.
data() {
    return {
      key: 0,
      infoList: [],
    };
},
methods: {
    goPrev() {
      if (this.key !== 0) {
        document.querySelector(".info-slide").classList.remove("next");
        document.querySelector(".info-slide").classList.add("prev");
        this.key -= 1;
      }
    },
    goNext() {
      if (this.key !== this.infoList.length - 1) {
        document.querySelector(".info-slide").classList.remove("prev");
        document.querySelector(".info-slide").classList.add("next");
        this.key += 1;
      }
    },
}
.
.

- key는 infoList의 index 값으로 사용하기 위한 값입니다.

 

- goPrev 함수는 이전 슬라이드로 돌아가는 함수입니다.

- key가 0이 아닌 경우에 눌리도록 하였고, info-slide class에 next class를 삭제한 뒤 prev class를 추가했습니다.

- prev class를 추가한 이유는 이전 슬라이드로 돌아가는 애니메이션을 구현하기 위함입니다.

 

- goNext 함수는 다음 슬라이도로 넘어가는 함수입니다.

- key가 마지막 인덱스와 같지 않으면 눌리도록 하였습니다.

- 위와 반대로 info-slide class에 prev class를 삭제하고, next class를 추가했습니다.

 

 

 

 

3. Style (scss)

.
.
.next > .slide-enter-active {
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.next > .slide-enter {
    transform: translate3d(100%, 0, 0);
}
.next > .slide-leave-active {
    position: absolute;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.next > .slide-leave-to {
    position: absolute;
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
}

.prev > .slide-enter-active {
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.prev > .slide-enter {
    transform: translate3d(-100%, 0, 0);
}
.prev > .slide-leave-active {
    position: absolute;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.prev > .slide-leave-to {
    position: absolute;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
}
.
.

- 슬라이드를 구현하는 scss 코드만 올리겠습니다.

- 추가된 class인 next와 prev 유무에 따라 왼쪽에서 오른쪽으로 슬라이드 될지, 오른쪽에서 왼쪽으로 슬라이드 될지 정했습니다.

 

- next인 경우 translate3d(100%, 0, 0)에서 translate3d(-100%, 0, 0)으로 슬라이드 됩니다.

- prev인 경우에는 translate3d(-100%, 0, 0)에서 translate3d(100%, 0, 0)으로 슬라이드 됩니다.

 

- 저는 슬라이드 속도는 0.5초로 설정해두었으니, 필요에 따라 수정하면 됩니다.

 

 

 

이상으로 transition-group으로 양방향 슬라이드 navigation을 구현해보았습니다.

---