update examples with new transition api

8 years ago · e61a0189a4
2 changed files with 30 additions and 26 deletions
--- 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">
--- 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 -->