From 505aed45756a4ad0b05b53570bed15ea127a0cd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Sun, 9 Jul 2017 02:35:07 +0200
Subject: [PATCH] =?UTF-8?q?Use=20transitions=20for=20=F0=9F=99=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/dynamic-components/pages/index.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/examples/dynamic-components/pages/index.vue b/examples/dynamic-components/pages/index.vue
index dcacf3cf6a..c66cfacb68 100755
--- a/examples/dynamic-components/pages/index.vue
+++ b/examples/dynamic-components/pages/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <h1>Nuxt Chat</h1>
-    <ul>
-      <li v-for="message in messages">
+    <transition-group name="list" tag="ul">
+      <li v-for="(message, index) in messages" :key="index">
         <component :is="message.component" :data="message.data"></component>
       </li>
-    </ul>
+    </transition-group>
   </div>
 </template>
 
@@ -58,5 +58,13 @@ ul li {
   background: white;
   border: 1px #ddd solid;
   overflow: hidden;
+  opacity: 1;
+}
+.list-enter-active, .list-leave-active {
+  transition: all 0.4s;
+}
+.list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
 }
 </style>
\ No newline at end of file