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>
+        <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,7 +9,8 @@
  <body>
    <!-- template for the modal component -->
    <script type="text/x-template" id="modal-template">
-      <div class="modal-mask" transition="modal">
+      <transition name="modal">
+        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">

@ -36,6 +37,7 @@
            </div>
          </div>
        </div>
+      </transition>
    </script>

    <!-- app -->