list transitions

Author: yyx990803

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@vue/repl": "^0.4.7",
     "@vue/theme": "^0.1.23",
+    "gsap": "^3.9.0",
     "vitepress": "^0.20.9",
     "vue": "^3.2.25"
   },

pnpm-lock.yaml

@@ -555,14 +555,25 @@ export default defineConfig({
     },
     build: {
       minify: 'terser',
-      chunkSizeWarningLimit: Infinity
+      chunkSizeWarningLimit: Infinity,
+      rollupOptions: {
+        output: {
+          manualChunks(id, ctx) {
+            if (id.includes('gsap')) {
+              return 'gsap'
+            }
+            return moveToVendor(id, ctx)
+          }
+        }
+      }
     },
     json: {
       stringify: true
     }
   },
 
   vue: {
+    reactivityTransform: true,
     template: {
       compilerOptions: {
         directiveTransforms: {
@@ -572,3 +583,59 @@ export default defineConfig({
     }
   }
 })
+
+const cache = new Map<string, boolean>()
+
+/**
+ * This is temporarily copied from Vite - which should be exported in a
+ * future release.
+ *
+ * @TODO when this is exported by Vite, VitePress should ship a better
+ * manual chunk strategy to split chunks for deps that are imported by
+ * multiple pages but not all.
+ */
+function moveToVendor(id: string, { getModuleInfo }: any) {
+  if (
+    id.includes('node_modules') &&
+    !/\.css($|\\?)/.test(id) &&
+    staticImportedByEntry(id, getModuleInfo, cache)
+  ) {
+    return 'vendor'
+  }
+}
+
+function staticImportedByEntry(
+  id: string,
+  getModuleInfo: any,
+  cache: Map<string, boolean>,
+  importStack: string[] = []
+): boolean {
+  if (cache.has(id)) {
+    return cache.get(id) as boolean
+  }
+  if (importStack.includes(id)) {
+    // circular deps!
+    cache.set(id, false)
+    return false
+  }
+  const mod = getModuleInfo(id)
+  if (!mod) {
+    cache.set(id, false)
+    return false
+  }
+
+  if (mod.isEntry) {
+    cache.set(id, true)
+    return true
+  }
+  const someImporterIs = mod.importers.some((importer: string) =>
+    staticImportedByEntry(
+      importer,
+      getModuleInfo,
+      cache,
+      importStack.concat(id)
+    )
+  )
+  cache.set(id, someImporterIs)
+  return someImporterIs
+}

src/.vitepress/config.ts

@@ -1,5 +1,11 @@
 # KeepAlive
 
+## Basic Usage
+
+:::tip
+When used in [DOM templates](/guide/essentials/component-basics.html#dom-template-parsing-caveats), it should be referenced as `<keep-alive>`.
+:::
+
 Earlier, we used the `is` attribute to switch between components in a tabbed interface:
 
 ```vue-html
@@ -28,3 +34,7 @@ Check out the result below:
 Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered.
 
 Check out more details on `<keep-alive>` in the [API reference](/api/built-in-components.html#keep-alive).
+
+## Include / Exclude
+
+## Max Cached Instances

src/guide/built-ins/keep-alive.md

@@ -0,0 +1,24 @@
+<script setup>
+let show = $ref(true)
+</script>
+
+<template>
+  <div class="demo">
+    <button @click="show = !show">Toggle Fade</button>
+    <Transition name="fade">
+      <p style="margin-top: 20px" v-if="show">hello</p>
+    </Transition>
+  </div>
+</template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/guide/built-ins/transition-demos/Basic.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { h } from 'vue'
+
+const CompA = () => h('div', 'Component A')
+const CompB = () => h('div', 'Component B')
+
+let activeComponent = $ref(CompA)
+</script>
+
+<template>
+  <div class="demo">
+    <label>
+      <input type="radio" v-model="activeComponent" :value="CompA" /> A
+    </label>
+    <label>
+      <input type="radio" v-model="activeComponent" :value="CompB" /> B
+    </label>
+    <Transition name="fade" mode="out-in">
+      <component :is="activeComponent"></component>
+    </Transition>
+  </div>
+</template>

src/guide/built-ins/transition-demos/BetweenComponents.vue

@@ -0,0 +1,60 @@
+<script setup>
+const { mode } = defineProps(['mode'])
+
+let docState = $ref('saved')
+</script>
+
+<template>
+  <div class="demo transition-demo">
+    <span style="margin-right: 20px">Click to cycle through states:</span>
+    <div class="btn-container">
+      <Transition name="slide-up" :mode="mode">
+        <button v-if="docState === 'saved'" @click="docState = 'edited'">
+          Edit
+        </button>
+        <button v-else-if="docState === 'edited'" @click="docState = 'editing'">
+          Save
+        </button>
+        <button v-else-if="docState === 'editing'" @click="docState = 'saved'">
+          Cancel
+        </button>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style>
+.transition-demo {
+  display: flex;
+  align-items: center;
+}
+
+.transition-demo .btn-container {
+  display: inline-block;
+  position: relative;
+  height: 36px;
+}
+
+.transition-demo button {
+  position: absolute;
+}
+
+.transition-demo button + button {
+  margin: 0;
+}
+
+.transition-demo .slide-up-enter-active,
+.transition-demo .slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+</style>

src/guide/built-ins/transition-demos/BetweenElements.vue

@@ -0,0 +1,34 @@
+<script setup>
+let show = $ref(true)
+</script>
+
+<template>
+  <div class="demo">
+    <button @click="show = !show">Toggle</button>
+    <Transition name="bounce">
+      <p v-if="show" style="margin-top: 20px; text-align: center;">
+        Hello here is some bouncy text!
+      </p>
+    </Transition>
+  </div>
+</template>
+
+<style>
+.bounce-enter-active {
+  animation: bounce-in 0.5s;
+}
+.bounce-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

src/guide/built-ins/transition-demos/CssAnimation.vue

@@ -0,0 +1,64 @@
+<script setup>
+import gsap from 'gsap'
+
+let show = $ref(true)
+
+function onBeforeEnter(el) {
+  gsap.set(el, {
+    scaleX: 0.25,
+    scaleY: 0.25,
+    opacity: 1
+  })
+}
+
+function onEnter(el, done) {
+  gsap.to(el, {
+    duration: 1,
+    scaleX: 1,
+    scaleY: 1,
+    ease: 'elastic.inOut(2.5, 1)',
+    onComplete: done
+  })
+}
+
+function onLeave(el, done) {
+  gsap.to(el, {
+    duration: 0.7,
+    scaleX: 1,
+    scaleY: 1,
+    x: 300,
+    ease: 'elastic.inOut(2.5, 1)'
+  })
+  gsap.to(el, {
+    duration: 0.2,
+    delay: 0.5,
+    opacity: 0,
+    onComplete: done
+  })
+}
+</script>
+
+<template>
+  <div class="demo">
+    <button @click="show = !show">Toggle</button>
+
+    <Transition
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @leave="onLeave"
+      :css="false"
+    >
+      <div class="gsap-box" v-if="show"></div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+.gsap-box {
+  background: var(--vt-c-green);
+  margin-top: 20px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+</style>

src/guide/built-ins/transition-demos/JsHooks.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { reactive } from 'vue'
+
+const items = reactive([1, 2, 3, 4, 5])
+let nextNum = items.length + 1
+
+function add() {
+  items.splice(randomIndex(), 0, nextNum++)
+}
+
+function remove() {
+  items.splice(randomIndex(), 1)
+}
+
+function randomIndex() {
+  return Math.floor(Math.random() * items.length)
+}
+</script>
+
+<template>
+  <div class="demo">
+    <button @click="add">Add at random index</button>
+    <button @click="remove">Remove at random index</button>
+    <TransitionGroup name="list" tag="ul" style="margin-top: 20px">
+      <li v-for="item in items" :key="item">
+        {{ item }}
+      </li>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>