목록의 초기 렌더링에 있는 목록 항목(스태거)에 애니메이션을 적용합니다.

목록의 초기 렌더링에 있는 목록 항목(스태거)에 애니메이션을 적용합니다.

메뉴/내비게이션이 표시되었을 때 포함된 목록 항목의 외관을 바꾸는 내비게이션을 제작하려고 합니다.

햄버거 기호가 있는데 클릭하면 네비게이션(전체 화면)이 렌더링됩니다.이제 서로 다른 목록 항목(실제 링크)이 서로 지연되어 나타나는 애니메이션을 만들고 싶습니다.첫 번째 목록 항목과 마지막 목록입니다.

Vue의 걸로 할 수 있을 것 같아서<transition-group>목록 전환은 모두 목록 항목 추가 및 삭제에 관한 것이지만, 처음부터 모두 가지고 있습니다.

그 후, Vue.js: Straging List Transitions를 읽었습니다.이것만으로 충분하다고 생각했습니다.아쉽게도 나도 그것을 작동시킬 수고가 많았습니다.

제가 어떻게 그럴 수 있는지 힌트 좀 주시겠어요?

지금까지 v-if를 사용하여 네비게이션을 렌더링했습니다.

<transition name="u-anim-fade" mode="in-out">
  <Navigation v-if="navMenuOpen" />
</transition>

내비게이션 구성 요소:

<nav>
    <ul class="Navigation__list">
      <li
        v-for="(item, key) in menu.items"
        class="Navigation__item"
        :key="`nav-item-${key}`">
        <nuxt-link>
          <span v-html="item.title" />
        </nuxt-link>
    </ul>
</nav>

(여기 코드 심플화 몇 가지를 빠뜨렸습니다)

여기서 권장하는 Enter/leave/onEnter 함수를 추가할 경우: Vue.js: 스태거링 목록 전환

v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"

다음과 같은 경우:

<nav>
    <transition-group
      name="staggered-fade"
      tag="ul"
      class="Navigation__list"
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <li
        v-for="(item, key) in menu.items"
        class="Navigation__item"
        :key="`nav-item-${key}`">
        <nuxt-link>
          <span v-html="item.title" />
        </nuxt-link>
    </transition-group>
</nav>

메서드(물론 메서드에 추가)는 렌더링할 때 실행조차 되지 않습니다.Navigation요소.아마 아이템이 추가 또는 삭제되지 않았기 때문일 것입니다.

아마 아이템이 추가 또는 삭제되지 않았기 때문일 것입니다.

네 말이 맞아, 네게 필요한 건 이거야

초기 렌더링 시 전환

노드의 초기 렌더링에도 트랜지션을 적용할 경우appear속성:

<transition appear>
  <!-- ... -->
</transition>

방금 시도했는데 없으면 초기 렌더링에서 리스너 함수가 호출되지 않습니다.

와도 동작하는 것에 주의해 주세요.<transition-group>구성 요소들.

vue 3 사용자용, GSAP 사용

<template>
  <div>
    <transition-group 
      appear
      tag="ul"
      @before-enter="beforeEnter"
      @enter="enter"
    >
      <li v-for="(item, index) in items" :key="icon.name" :data-index="index">
        <div>{{ item.text }}</div>
      </li>
    </transition-group>
  </div>
</template>

<script>
import { ref } from 'vue'
import { gsap } from 'gsap'
export default {
  setup() {
    const items = ref([
      { text: 'by email' },
      { text: 'by phone' },
    ])
    const beforeEnter = (el) => {
      el.style.opacity = 0
      el.style.transform = 'translateY(100px)'
    }
    const enter = (el, done) => {
      gsap.to(el, {
        opacity: 1,
        y: 0,
        duration: 0.8,
        onComplete: done,
        delay: el.dataset.index * 0.2
      })
    }
    return { items, beforeEnter, enter }
  }
}
</script>

자세한 내용은 이쪽

언급URL : https://stackoverflow.com/questions/49703210/animate-list-items-stagger-on-the-initial-render-of-list