rename transition example

Author: yyx990803

examples/index.html

@@ -14,8 +14,8 @@ <h1>Vue Router Examples</h1>
     <li><a href="active-links">Active Links</a></li>
     <li><a href="redirect">Redirect</a></li>
     <li><a href="route-alias">Route Alias</a></li>
-    <li><a href="animations">Animations</a></li>
     <li><a href="data-fetching">Data Fetching</a></li>
+    <li><a href="transitions">Transitions</a></li>
     <li><a href="navigation-guards">Navigation Guards</a></li>
     <li><a href="scroll-behavior">Scroll Behavior</a></li>
     <li><a href="auth-flow">Auth Flow</a></li>

examples/animations/app.js renamed to examples/transitions/app.js

@@ -13,11 +13,24 @@ const Home = {
 }
 
 const Parent = {
+  data () {
+    return {
+      transitionName: 'slide-left'
+    }
+  },
+  // dynamically set transition based on route change
+  watch: {
+    '$route' (to, from) {
+      const toDepth = to.path.split('/').length
+      const fromDepth = from.path.split('/').length
+      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
+    }
+  },
   template: `
     <div class="parent">
       <h2>Parent</h2>
-      <transition name="slide">
-        <router-view class="child"></router-view>
+      <transition :name="transitionName">
+        <router-view class="slide"></router-view>
       </transition>
     </div>
   `
@@ -44,7 +57,7 @@ const app = new Vue({
   router,
   template: `
     <div id="app">
-      <h1>Animations</h1>
+      <h1>Transitions</h1>
       <ul>
         <li><router-link to="/">/</router-link></li>
         <li><router-link to="/parent">/parent</router-link></li>

examples/animations/index.html renamed to examples/transitions/index.html

@@ -6,21 +6,21 @@
 .fade-enter, .fade-leave-active {
   opacity: 0
 }
-.slide-enter-active, .slide-leave-active {
+.slide {
   position: absolute;
   transition: opacity .35s cubic-bezier(.55,0,.1,1),
               transform .35s cubic-bezier(.55,0,.1,1);
 }
-.slide-enter {
+.slide-left-enter, .slide-right-leave-active {
   opacity: 0;
   transform: translate(30px, 0);
 }
-.slide-leave-active {
+.slide-left-leave-active, .slide-right-enter {
   opacity: 0;
   transform: translate(-30px, 0);
 }
 </style>
 <a href="/">Examples index</a>
 <div id="app"></div>
 <script src="/__build__/shared.js"></script>
-<script src="/__build__/animations.js"></script>
+<script src="/__build__/transitions.js"></script>