Merge pull request #240 from niceplugin/examples/list-transition

예제 번역: /examples/list-transition

Author: narusas

ko-KR/.vitepress/config.ts

@@ -477,7 +477,7 @@ export const sidebar = {
           link: '/examples/#modal'
         },
         {
-          text: 'List with Transitions',
+          text: '트렌지션으로 리스트 구현',
           link: '/examples/#list-transition'
         },
         {

ko-KR/src/examples/src/list-transition/App/style.css

@@ -11,22 +11,22 @@
   box-sizing: border-box;
 }
 
-/* 1. declare transition */
+/* 1. 트렌지션 선언 */
 .fade-move,
 .fade-enter-active,
 .fade-leave-active {
   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
-/* 2. declare enter from and leave to state */
+/* 2. 진입 및 진출 상태 선언 */
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
   transform: scaleY(0.01) translate(30px, 0);
 }
 
-/* 3. ensure leaving items are taken out of layout flow so that moving
-      animations can be calculated correctly. */
+/* 3. 진출하는 리스트 아이템이 레이아웃에서 제외되어,
+      움직이는 아이템들이 올바르게 계산되도록 합니다. */
 .fade-leave-active {
   position: absolute;
 }

ko-KR/src/examples/src/list-transition/App/template.html

@@ -1,6 +1,6 @@
-<button @click="insert">insert at random index</button>
-<button @click="reset">reset</button>
-<button @click="shuffle">shuffle</button>
+<button @click="insert">임의의 인덱스에 삽입</button>
+<button @click="reset">초기화</button>
+<button @click="shuffle">섞기</button>
 
 <TransitionGroup tag="ul" name="fade" class="container">
   <div v-for="item in items" class="item" :key="item">

ko-KR/src/examples/src/list-transition/description.txt

@@ -1,2 +1,2 @@
-FLIP list transitions with the built-in <TransitionGroup>.
-https://aerotwist.com/blog/flip-your-animations/
+빌트인 컴포넌트인 <TransitionGroup>으로 FLIP 리스트 변환 효과를 구현한 예제입니다.
+FLIP 알아보기: https://aerotwist.com/blog/flip-your-animations/