update examples with new transition api

yyx990803 · yyx990803 · commit e61a0189a45d · 2016-07-13T14:27:06.000-04:00
diff --git a/examples/firebase/index.html b/examples/firebase/index.html
@@ -9,15 +9,17 @@
     <!-- Firebase -->
     <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
     <!-- VueFire -->
-    <script src="https://cdn.jsdelivr.net/vuefire/1.0.1/vuefire.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/vuefire/1.2.0/vuefire.min.js"></script>
   </head>
   <body>
     <div id="app">
       <ul>
-        <li class="user" v-for="user in users" transition>
-          <span>{{user.name}} - {{user.email}}</span>
-          <button v-on:click="removeUser(user)">X</button>
-        </li>
+        <transition v-for="user in users" :key="user['.key']">
+          <li class="user">
+            <span>{{user.name}} - {{user.email}}</span>
+            <button v-on:click="removeUser(user)">X</button>
+          </li>
+        </transition>
       </ul>
       <form id="form" v-on:submit.prevent="addUser">
         <input v-model="newUser.name">
diff --git a/examples/modal/index.html b/examples/modal/index.html
@@ -9,33 +9,35 @@
   <body>
     <!-- template for the modal component -->
     <script type="text/x-template" id="modal-template">
-      <div class="modal-mask" transition="modal">
-        <div class="modal-wrapper">
-          <div class="modal-container">
+      <transition name="modal">
+        <div class="modal-mask">
+          <div class="modal-wrapper">
+            <div class="modal-container">
 
-            <div class="modal-header">
-              <slot name="header">
-                default header
-              </slot>
-            </div>
+              <div class="modal-header">
+                <slot name="header">
+                  default header
+                </slot>
+              </div>
 
-            <div class="modal-body">
-              <slot name="body">
-                default body
-              </slot>
-            </div>
+              <div class="modal-body">
+                <slot name="body">
+                  default body
+                </slot>
+              </div>
 
-            <div class="modal-footer">
-              <slot name="footer">
-                default footer
-                <button class="modal-default-button" @click="$emit('close')">
-                  OK
-                </button>
-              </slot>
+              <div class="modal-footer">
+                <slot name="footer">
+                  default footer
+                  <button class="modal-default-button" @click="$emit('close')">
+                    OK
+                  </button>
+                </slot>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </transition>
     </script>
 
     <!-- app -->
