add animations example

yyx990803 · yyx990803 · commit 33d5429beacc · 2016-07-24T16:15:01.000-04:00
diff --git a/examples/animations/app.js b/examples/animations/app.js
@@ -0,0 +1,59 @@
+import Vue from 'vue/dist/vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Home = {
+  template: `
+    <div>
+      <h2>Home</h2>
+      <p>hello</p>
+    </div>
+  `
+}
+
+const Parent = {
+  template: `
+    <div class="parent">
+      <h2>Parent</h2>
+      <transition name="slide">
+        <router-view class="child"></router-view>
+      </transition>
+    </div>
+  `
+}
+
+const Default = { template: '<div>default</div>' }
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/', component: Home },
+    { path: '/parent', component: Parent, children: [
+      { path: '', component: Default },
+      { path: 'foo', component: Foo },
+      { path: 'bar', component: Bar }
+    ]}
+  ]
+})
+
+const app = new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Animations</h1>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/parent">/parent</router-link></li>
+        <li><router-link to="/parent/foo">/parent/foo</router-link></li>
+        <li><router-link to="/parent/bar">/parent/bar</router-link></li>
+      </ul>
+      <transition name="fade" mode="out-in">
+        <router-view></router-view>
+      </transition>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/animations/index.html b/examples/animations/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s ease;
+}
+.fade-enter, .fade-leave-active {
+  opacity: 0
+}
+.slide-enter-active, .slide-leave-active {
+  position: absolute;
+  transition: opacity .35s cubic-bezier(.55,0,.1,1),
+              transform .35s cubic-bezier(.55,0,.1,1);
+}
+.slide-enter {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+.slide-leave-active {
+  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>
