개요

나는 CSS 애니메이션에서 이런 동작을 실현하고 싶다.

실시

각 문자를 애니메이션화하기 위해 각 문자는 요소를 구분합니다.
문자가 공백에서 미끄러지도록 span을 이중으로 설정합니다.

<p class="animation">
  <span><span>A</span></span>
  <span><span>N</span></span>
  <span><span>I</span></span>
  <span><span>M</span></span>
  <span><span>A</span></span>
  <span><span>T</span></span>
  <span><span>I</span></span>
  <span><span>O</span></span>
  <span><span>N</span></span>
</p>
<button @click="handleClick">toggle</button>

단추가 눌렸을 때,javascript 부분은 <p class="animation"> 클래스에 추가하거나 제거합니다.

const element = document.querySelector(".animation");
if (element.classList.contains('active')) {
  element.classList.remove('active')
} else {
  element.classList.add('active')
}

CSS는 애니메이션 전후의 상태를 지정합니다.
active class가 없을 때, 문자를 가로로 이동하고, active class가 있을 때 원래의 위치로 되돌려줍니다.
바깥쪽 스팬에 active 를 붙여서 미끄러지는 문자를 숨깁니다.

.animation span {
  overflow: hidden;
  display: inline-block;
}

.animation span span {
  transform: translateX(50px);
  transition: .5s;
}

.animation.active span span {
  transform: translateX(0);
}

바깥쪽 스판이 없으면 이렇게 돼요.

component화

이런 느낌으로 Component를 하면 사용하기 쉬워요.

<template>
  <p class="slide-in" :class="{active: active}" :style="myStyle">
    <span v-for="(t, index) in text" :key="index">
      <span>{{ t }}</span>
    </span>
  </p>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator'

@Component
export default class SlideIn extends Vue {
  @Prop({default: ''})
  text!: string

  @Prop()
  myStyle!: {}

  @Prop({default: false})
  active!: boolean
}
</script>

<style>
.slide-in span {
  display: inline-block;
  overflow: hidden;
}

.slide-in span span {
  transform: translateX(50px);
  transition: 0.5s;
}

.slide-in.active span span {
  transform: translateX(0);
}
</style>

참고 자료