Vue에서 전환 및 전환 그룹 구성 요소의 차이점

애니메이션은 프론트엔드 개발에서 요즘 필수품인 것 같으며 앱의 사용자 경험을 상당히 향상시킵니다. 고맙게도 vue.js는 앱 애니메이션의 복잡성을 추상화하는 두 가지 기본 제공 구성 요소를 제공했습니다. transition 및 transition-group .

이 기사에서는 이 두 구성 요소의 유사점과 차이점, 사용 방법 및 작업 시 발생할 수 있는 문제에 대한 간략한 개요를 살펴보겠습니다.

먼저 유사점을 살펴봅니다.

유사점

앞에서 언급한 이 두 구성 요소는 vue.js 앱의 요소와 구성 요소 사이에 애니메이션을 적용하는 데 사용됩니다.

두 구성 요소 모두 애니메이션할 요소 또는 구성 요소를 둘러싸고 있습니다.

두 구성 요소 모두 적용할 애니메이션의 이름을 나타내는 name 속성이 필요합니다.

다음은 이러한 구성 요소를 사용하는 방법에 대한 개략적인 정보입니다.

<transition name="fade">
  <!-- elements to be animated -->
</transition>

<transition-group name="fade">
  <!-- elements to be animated -->
</transition-group>

그것은 이러한 구성 요소가 얼마나 유사한지에 관한 것입니다. 이제 차이점을 살펴볼 때입니다.

차이점

transition 및 transition-group 구성 요소의 주요 차이점은 사용 방법입니다.

전환 구성 요소를 사용하는 방법

transition 구성 요소는 다음 범주에 속하는 요소 또는 구성 요소를 애니메이션하는 데 사용됩니다.

동적 구성 요소

조건부로 표시되는 구성요소( v-show )

조건부로 렌더링된 구성 요소( v-if )

구성 요소의 루트 노드

router-view 구성 요소

동적 구성 요소의 예

다음은 동적 구성 요소와 함께 transition 구성 요소를 사용하는 방법의 예입니다.

<template>
    <div>
        <transition name='fade'>
            <component :is="currentComponent"></component>
        </transition>
    </div>
</template>

<script>
import UserOne from '~/components/users/One.vue'
import UserTwo from '~/components/users/Two.vue'
export default{
    props: {
        userId: {
            type: Number,
            required: true
        }
    }
    components:{
        UserOne,
        UserTwo
    },
    computed:{
        currentComponent(){
            return this.userId === 1? 'UserOne' : 'UserTwo'
        }
    }
}
</script>

위의 스니펫에서 userId prop의 값에 따라 두 개의 구성 요소가 토글됩니다. transition 구성 요소를 사용하여 프로세스를 애니메이션합니다.

조건부로 표시되는 구성 요소의 예

<template>
    <div>
        <button @click="showDescription = !showDecription">toggle description</button>
        <transition name='bounce-up'>
            <p v-show="showDescription">
                This is a decription.
            </p>
        </transition>
    </div>
</template>

<script>
export default{
    data(){
        return {
            showDescription: false
        }
       }
}
</script>

위의 예는 조건부 표시 지시어( v-show )를 사용하여 요소 표시를 토글하며 이제 요소가 나타나고 사라질 때 애니메이션을 적용할 수 있습니다.

라우터 보기 구성 요소의 예

앱에 모든 경로 구성 요소(일반적으로 App.vue)를 렌더링하는 하나의 기본 구성 요소가 있는 경우 경로가 이동될 때 애니메이션이 되도록 router-view 구성 요소를 transition 구성 요소로 래핑할 수 있습니다.

<template>
    <div>
        <nav>
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/contact">Contact us</router-link>
        </nav>

           <transition :name="transitionName">
            <router-view></router-view>
        </transiton>
    </div>
</template>

<script>
export default {
    data(){
        return {
            transitionName: 'fade-up'
        }
    }
    watch: {
        '$route'(to, from){
            const toDepth = to.path.split('/').length
            const fromDepth = from.path.split('/').length
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
    }
}
</script>

전환 그룹 구성 요소를 사용하는 방법

transition-group 구성 요소는 애니메이션을 처리할 때 다른 사용 사례를 사용합니다.
transition-group는 DOM의 여러 구성 요소 또는 요소(예: 렌더링 목록)의 진입 및 퇴장을 처리할 때 사용됩니다.

코드 예제를 시작하기 전에 transition-group가 transition와 어떻게 다른지 살펴보겠습니다.

요소는 기본적으로 span 렌더링되는 모든 요소 주위에 실제로 래핑되지만 tag 속성으로 변경할 수 있습니다.

transition-group 구성 요소 내부의 요소에는 고유한 값이 있는 key 속성이 있어야 합니다(요소의 인덱스를 사용하면 작동하지 않으며 고유하지 않음).

CSS 애니메이션은 래퍼 요소가 아닌 개별 요소에 적용됩니다.

<template>
<div>
  <h2>Todos:</h2>
  <transition-group name="fade-x" tag="ol">
    <li v-for="todo in notDone" :key="todo.id">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
    </transition-group>
</div>
</template>

<script>
export default {
  data(){
    return{
      todos: [
        { id: 1, text: "Learn JavaScript", done: false },
        { id: 2, text: "Learn Vue", done: false },
        { id: 3, text: "Play around in JSFiddle", done: true },
        { id: 4, text: "Build something awesome", done: false }
      ]
    }
  },
  methods: {
      toggle: function(todo){
        todo.done = !todo.done
    }
  }, 
  computed: {
      notDone(){
        return this.todos.filter(todo=> !todo.done)
    }
  }
}
</script>

<style>
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.fade-x-enter-active, .fade-x-leave-active{
   transition: all .3s;
}

.fade-x-enter, .fade-x-leave-to{
  opacity: 0;
  transform: translateX(20px)
}
</style>

이제 작업이 선택 해제되어 있으면 요소가 DOM을 떠나기 전에 애니메이션을 확인할 수 있습니다.

여기에서 새fiddle를 만들고 위의 스니펫을 붙여넣어 테스트할 수 있습니다.

TLDR

전체 기사를 읽을 만큼 오래 머물 시간이 없었다면 다음과 같이 요약합니다.

한 번에 하나의 요소 또는 구성 요소만 렌더링되는 경우 transition를 사용하고 다중의 경우 transiton-group를 사용합니다.

transition-group 요소에는 고유한 키 속성이 있어야 합니다.

tag 구성 요소의 transition-group 속성을 사용하여 내부에 있는 모든 요소를 ​​래핑하는 요소의 종류를 변경합니다.