Vue.js에서 요소를 표시하면서 애니메이션

Vue의 애니메이션으로 구현 방법을 검색하면 "transition"이 잘 나올까 생각합니다.
이 「transition」도 매우 편리합니다만,
컴퍼넌트가 표시·비표시가 될 때 이외에도 요소에 애니메이션을 붙이고 싶었으므로,
CSS와 Vue를 사용하여 구현해 보았습니다.

이번은 잘 보이는 회전 목마의 일종으로,
다음 이미지가 보이는 패턴을 만드는 방법을 소개하고 싶습니다.
↓이런 느낌의!

transform, transition-duration을 사용하여 이렇게 쉽게!

움직이고 싶은 요소에
translate와 transition-duration을 지정함으로써 쉽게 애니메이션을 구현할 수 있습니다.

■이쪽의 페이지로부터 움직이는 데모를 확인할 수 있습니다

App.vue

<template>
  <div id="app">
    <div class="sample">
      <div class="sample__wrap">
        //スライドさせたい要素のstyleにtransformを指定し、位置が動的に変わるように設定する（${position}pxの部分）
        <ul
          class="sample__list"
          :style="{ transform: `translate(${position}px, 0)` }"
        >
          <li class="sample__item sample__item--pink">1</li>
          <li class="sample__item sample__item--green">2</li>
          <li class="sample__item sample__item--orange">3</li>
          <li class="sample__item sample__item--blue">4</li>
          <li class="sample__item sample__item--yellow">5</li>
          <li class="sample__item sample__item--red">6</li>
        </ul>
      </div>
      <div
        class="sample__btn sample__btn--prev"
        @click="moveContainer('left');"
        :class="{ isDisabled: this.rightEnd }"
      ></div>
      <div
        class="sample__btn sample__btn--next"
        @click="moveContainer('right');"
        :class="{ isDisabled: this.leftEnd }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemWidth: 200,
      position: 0,
      leftEnd: true,
      rightEnd: false
    };
  },
  methods: {
    moveContainer(turn) {
      if (turn === "left") {
        if (this.position < -(this.itemWidth * 4)) {
          return;
        }
        this.position = this.position - this.itemWidth;
      } else {
        if (this.position === 0) {
          return;
        }
        this.position = this.position + this.itemWidth;
      }
      this.leftEnd = this.position === 0 ? true : false;
      this.rightEnd = this.position < -(this.itemWidth * 4) ? true : false;
    }
  }
};
</script>

<style lang="scss">
.sample {
  position: relative;
  margin: 100px auto;
  width: 300px;
  &__wrap {
    overflow: hidden;
    border: 5px solid #848484;
  }
  &__list {
    //translateの値が変化した時に、
    //ここのtransition-durationの指定でアニメーションしながら要素が動く
    transition-duration: 0.8s;
    margin: 0;
    padding: 0;
    display: flex;
    width: 1200px;
  }
  &__item {
    list-style: none;
    width: 200px;
    height: 200px;
    line-height: 200px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    &--pink {
      background: #ff69b4;
    }
    &--green {
      background: #3cb371;
    }
    &--orange {
      background: #ffa500;
    }
    &--blue {
      background: #6495ed;
    }
    &--yellow {
      background: #ffd700;
    }
    &--red {
      background: #ff6347;
    }
  }
  &__btn {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    &:hover {
      opacity: 0.8;
    }
    &:before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
    }
    &--prev {
      bottom: 80px;
      left: -60px;
      &:before {
        left: 13px;
        width: 14px;
        height: 14px;
        border-bottom: 4px solid #fff;
        border-left: 4px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
    &--next {
      bottom: 80px;
      right: -60px;
      &:before {
        left: 9px;
        width: 14px;
        height: 14px;
        border-top: 4px solid #fff;
        border-right: 4px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
  }
}
.isDisabled {
  opacity: 0.2;
  &:hover {
    opacity: 0.2;
  }
}
</style>

translate의 값을 동적으로 하는 것으로 유저가 클릭하면, 무엇인가 표시가 바뀌면, 등등 여러가지 응용을 할 수 있습니다.

요약

Vue의 애니메이션으로 검색하면, 「transition」의 기사만이 나오고, 하고 싶은 일을 할 수 없거나 했습니다만,
CSS를 사용하는 것으로 JQuery로 구현하고 있던 것 같은 UI도 구현할 수 있게 됩니다.
(「transition」으로 실장할 수 있는 부분은 「transition」을 사용해야 합니다만)
CSS의 애니메이션도 오이타 충실해 왔으므로, 잘 Vue.js와 함께 사용해 가고 싶네요.