update move animation example

zhoukai91 · Dec 27, 2016 · e120d14 · e120d14
1 parent f5f8453
commit e120d14
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/examples/move-animations/index.html b/examples/move-animations/index.html
@@ -15,22 +15,24 @@
         border: 1px solid #666;
         box-sizing: border-box;
       }
+      /* 1. declare transition */
       .fade-move, .fade-enter-active, .fade-leave-active {
         transition: all .5s cubic-bezier(.55,0,.1,1);
       }
-      .fade-enter {
+      /* 2. declare enter from and leave to state */
+      .fade-enter, .fade-leave-to {
         opacity: 0;
-        transform: scaleY(0) translate(30px, 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. */
       .fade-leave-active {
         position: absolute;
-        opacity: 0;
-        transform: scaleY(0.01) translate(30px, 0);
       }
     </style>
     <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
     <!-- Delete ".min" for console warnings in development -->
-    <script src="../../dist/vue.min.js"></script>
+    <script src="../../dist/vue.js"></script>
   </head>
   <body>
     <div id="el">