update move animation example

8 years ago · e120d1459d
1 changed files with 7 additions and 5 deletions
--- 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">