vue3-core/packages-private/vapor-e2e-test/transition/App.vue

<script vapor>
import { ref, shallowRef } from 'vue'
const show = ref(true)
const toggle = ref(true)
const count = ref(0)

const timeout = (fn, time) => setTimeout(fn, time)

let calls = {
  basic: [],
  withOutAppear: [],
  withArgs: [],
  enterCancel: [],
}
window.getCalls = key => calls[key]
window.resetCalls = key => (calls[key] = [])

import VaporCompA from './components/VaporCompA.vue'
import VaporCompB from './components/VaporCompB.vue'
const activeComponent = shallowRef(VaporCompB)
function toggleComponent() {
  activeComponent.value =
    activeComponent.value === VaporCompA ? VaporCompB : VaporCompA
}

const toggleVdom = ref(true)
import VDomComp from './components/VdomComp.vue'

const interopComponent = shallowRef(VDomComp)
function toggleInteropComponent() {
  interopComponent.value =
    interopComponent.value === VaporCompA ? VDomComp : VaporCompA
}

const name = ref('test')
</script>

<template>
  <div class="transition-container">
    <div class="if-basic">
      <div>
        <transition>
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button @click="toggle = !toggle">basic toggle</button>
    </div>
    <div class="if-named">
      <div>
        <transition name="test">
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button @click="toggle = !toggle">button</button>
    </div>
    <div class="if-custom-classes">
      <div>
        <transition
          enter-from-class="hello-from"
          enter-active-class="hello-active"
          enter-to-class="hello-to"
          leave-from-class="bye-from"
          leave-active-class="bye-active"
          leave-to-class="bye-to"
        >
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button @click="toggle = !toggle">button</button>
    </div>
    <div class="if-dynamic-name">
      <div>
        <transition :name="name">
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button class="toggle" @click="toggle = !toggle">button</button>
      <button class="change" @click="name = 'changed'">{{ name }}</button>
    </div>
    <div class="if-events-without-appear">
      <div>
        <transition
          name="test"
          @before-enter="() => calls.withOutAppear.push('beforeEnter')"
          @enter="() => calls.withOutAppear.push('onEnter')"
          @after-enter="() => calls.withOutAppear.push('afterEnter')"
          @beforeLeave="() => calls.withOutAppear.push('beforeLeave')"
          @leave="() => calls.withOutAppear.push('onLeave')"
          @afterLeave="() => calls.withOutAppear.push('afterLeave')"
        >
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button @click="toggle = !toggle">button</button>
    </div>
    <div class="if-events-with-args">
      <div id="container">
        <transition
          :css="false"
          name="test"
          @before-enter="
            el => {
              calls.withArgs.push('beforeEnter')
              el.classList.add('before-enter')
            }
          "
          @enter="
            (el, done) => {
              calls.withArgs.push('onEnter')
              el.classList.add('enter')
              timeout(done, 200)
            }
          "
          @after-enter="
            el => {
              calls.withArgs.push('afterEnter')
              el.classList.add('after-enter')
            }
          "
          @before-leave="
            el => {
              calls.withArgs.push('beforeLeave')
              el.classList.add('before-leave')
            }
          "
          @leave="
            (el, done) => {
              calls.withArgs.push('onLeave')
              el.classList.add('leave')
              timeout(done, 200)
            }
          "
          @after-leave="
            () => {
              calls.withArgs.push('afterLeave')
            }
          "
        >
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button id="toggleBtn" @click="toggle = !toggle">button</button>
    </div>
    <div class="if-enter-cancelled">
      <div>
        <transition
          name="test"
          @enter-cancelled="
            () => {
              calls.enterCancel.push('enterCancelled')
            }
          "
        >
          <div v-if="!toggle" class="test">content</div>
        </transition>
      </div>
      <button @click="toggle = !toggle">cancelled</button>
    </div>
    <div class="if-appear">
      <div>
        <transition
          name="test"
          appear
          appear-from-class="test-appear-from"
          appear-to-class="test-appear-to"
          appear-active-class="test-appear-active"
        >
          <div v-if="toggle" class="test">content</div>
        </transition>
      </div>
      <button @click="toggle = !toggle">button</button>
    </div>

    <div class="vshow">
      <button @click="show = !show">Show</button>
      <Transition>
        <h1 v-show="show">vShow</h1>
      </Transition>
    </div>
    <div class="vif">
      <button @click="toggle = !toggle">Toggle</button>
      <Transition
        appear
        @beforeEnter="() => calls.basic.push('beforeEnter')"
        @enter="() => calls.basic.push('onEnter')"
        @afterEnter="() => calls.basic.push('afterEnter')"
        @beforeLeave="() => calls.basic.push('beforeLeave')"
        @leave="() => calls.basic.push('onLeave')"
        @afterLeave="() => calls.basic.push('afterLeave')"
        @beforeAppear="() => calls.basic.push('beforeAppear')"
        @appear="() => calls.basic.push('onAppear')"
        @afterAppear="() => calls.basic.push('afterAppear')"
      >
        <h1 v-if="toggle">vIf</h1>
      </Transition>
    </div>
    <div class="keyed">
      <button @click="count++">inc</button>
      <Transition>
        <h1 style="position: absolute" :key="count">{{ count }}</h1>
      </Transition>
    </div>
    <div class="out-in">
      <button @click="toggleComponent">toggle out-in</button>
      <div>
        <Transition name="fade" mode="out-in">
          <component :is="activeComponent"></component>
        </Transition>
      </div>
    </div>
    <div class="in-out">
      <button @click="toggleComponent">toggle in-out</button>
      <div>
        <Transition name="fade" mode="in-out">
          <component :is="activeComponent"></component>
        </Transition>
      </div>
    </div>
    <div class="vdom">
      <button @click="toggleVdom = !toggleVdom">toggle vdom component</button>
      <div>
        <Transition>
          <VDomComp v-if="toggleVdom" />
        </Transition>
      </div>
    </div>
    <div class="vdom-vapor-out-in">
      <button @click="toggleInteropComponent">
        switch between vdom/vapor component out-in mode
      </button>
      <div>
        <Transition name="fade" mode="out-in">
          <component :is="interopComponent"></component>
        </Transition>
      </div>
    </div>
    <div class="vdom-vapor-in-out">
      <button @click="toggleVdom = !toggleVdom">
        switch between vdom/vapor component in-out mode
      </button>
      <div>
        <Transition name="fade" mode="in-out">
          <VaporCompA v-if="toggleVdom" />
          <VDomComp v-else></VDomComp>
        </Transition>
      </div>
    </div>
  </div>
</template>
<style>
.keyed {
  height: 100px;
}
</style>
<style>
.transition-container > div {
  padding: 15px;
  border: 1px solid #f7f7f7;
  margin-top: 15px;
}
</style>