전환은 앱을 대화형으로 만드는 좋은 방법입니다. Vue.js를 사용하면 <transition> 구성 요소가 있는 요소의 모든 동적 이벤트를 애니메이션으로 만들 수 있습니다. 하지만 서로 관련된 여러 요소에 애니메이션을 적용해야 한다면 어떻게 해야 할까요?



TLDR: CodePen link

그래프 막대에 애니메이션을 적용하려고 할 때 이 문제를 우연히 발견했습니다. 각 막대는 특정 너비를 가져야 하고 이전 막대 바로 뒤에 애니메이션을 적용해야 했습니다. 또한 막대 수를 하드코딩하고 싶지 않았기 때문에 모두 데이터 기반이어야 했습니다.

데이터 및 템플릿 구축

따라서 문제를 분리해 보겠습니다. Vue 앱에서 막대가 정의되는 방식은 다음과 같습니다.

data(){
  return {
    bars: [75, 50, 100]
  }
}

그리고 그들은 for 루프에서 렌더링됩니다.

<div v-for="(bar, i) in bars" :key="i" class="bar">{{bar}}%</div>

다음을 사용하여 막대 애니메이션

애니메이션을 만드는 첫 번째 단계는 Vue에 필요한 구성 요소와 단일 루트를 추가하는 것입니다.

<transition name="bars" appear>
  <div>
    <div v-for="(bar, i) in bars" :key="i" class="bar">{{bar}}%</div>
  </div>
</transition>

appear 속성에 유의하십시오. DOM에 나타날 때 첫 번째(유일한) 하위 요소를 애니메이션하도록 Vue에 지시합니다. Vue는 전환을 위해 적용된 스타일을 검색할 만큼 영리하며 전환 기간 동안 요소에 몇 가지 특수 클래스를 추가합니다.

bars-enter-active 전체 기간 동안

bars-enter-from 시작 부분에 애니메이션을 적용할 CSS를 정의합니다. width: 0

bars-enter-to 끝에 애니메이션을 적용할 CSS를 정의합니다. width: 75%

문제는 각 막대에 대해 보다 세분화된 수준에서 이러한 속성을 정의해야 한다는 것입니다.

var()를 사용하여 CSS와 데이터 연결

CSSvar() 기능을 사용하면 동적 데이터를 CSS와 잘 연결할 수 있습니다. 요소의 다른 스타일 정의와 마찬가지로 데이터를 구성합니다.

<div style="--variableName: variableValue"></div>

그리고 실제 스타일시트에서 var(variableName)를 사용합니다.

.selector {
  CSS property: var(--variableName);
}

이 경우 너비를 정의하고 항목의 인덱스를 사용하여 애니메이션 지연을 계산하려면 각 막대가 필요합니다.

<div v-for="(bar, i) in bars" :key="i" class="bar" :style="`--width: ${bar}%; --delay: ${i}s`">{{bar}}%</div>

그리고 함께 제공되는 스타일을 추가합니다.

.bar {
  width: var(--width);
}

.bars-enter-from .bar {
  width: 0;
}

.bars-enter-active .bar {
  transition: all 2s;
  transition-delay: var(--delay);
}

마지막으로 명심해야 할 것은 Vue는 전환에서 정의된 시간 동안만 루트 요소에 특수 CSS 클래스를 유지한다는 것입니다. 따라서 예상되는 애니메이션 시간을 전환 기간으로 추가해 보겠습니다.

<div style="`transition: all ${(bars.length-1)+2}s`">

N이 막대의 수이고 각 막대를 렌더링하는 데 2초가 걸리는 경우 애니메이션은 정확히 N+2초가 걸립니다. 필요한 것보다 낮은 값으로 설정하면 일부 마디의 애니메이션이 완료되지 않고 최종 위치로 건너뜁니다.

See the functional sample on CodePen.

결론

--variableName: variableValue와 var(--variableName)의 조합은 for 루프를 통해 너무 많은 스타일 정의를 생성하는 것을 방지하는 좋은 방법입니다.

경험을 공유하거나 연락하고 싶다면 Kontent Discord에 가입하고 메시지를 보내주세요 😊