|
|
@@ -34,11 +34,18 @@ function toggleInteropComponent() {
|
|
|
</div>
|
|
|
<div class="vif">
|
|
|
<button @click="toggle = !toggle">Toggle</button>
|
|
|
- <Transition appear @beforeEnter="() => calls.push('beforeEnter')" @enter="() => calls.push('onEnter')"
|
|
|
- @afterEnter="() => calls.push('afterEnter')" @beforeLeave="() => calls.push('beforeLeave')"
|
|
|
- @leave="() => calls.push('onLeave')" @afterLeave="() => calls.push('afterLeave')"
|
|
|
- @beforeAppear="() => calls.push('beforeAppear')" @appear="() => calls.push('onAppear')"
|
|
|
- @afterAppear="() => calls.push('afterAppear')">
|
|
|
+ <Transition
|
|
|
+ appear
|
|
|
+ @beforeEnter="() => calls.push('beforeEnter')"
|
|
|
+ @enter="() => calls.push('onEnter')"
|
|
|
+ @afterEnter="() => calls.push('afterEnter')"
|
|
|
+ @beforeLeave="() => calls.push('beforeLeave')"
|
|
|
+ @leave="() => calls.push('onLeave')"
|
|
|
+ @afterLeave="() => calls.push('afterLeave')"
|
|
|
+ @beforeAppear="() => calls.push('beforeAppear')"
|
|
|
+ @appear="() => calls.push('onAppear')"
|
|
|
+ @afterAppear="() => calls.push('afterAppear')"
|
|
|
+ >
|
|
|
<h1 v-if="toggle">vIf</h1>
|
|
|
</Transition>
|
|
|
</div>
|
|
|
@@ -73,7 +80,9 @@ function toggleInteropComponent() {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vdom-vapor-out-in">
|
|
|
- <button @click="toggleInteropComponent">switch between vdom/vapor component out-in mode</button>
|
|
|
+ <button @click="toggleInteropComponent">
|
|
|
+ switch between vdom/vapor component out-in mode
|
|
|
+ </button>
|
|
|
<div>
|
|
|
<Transition name="fade" mode="out-in">
|
|
|
<component :is="interopComponent"></component>
|
|
|
@@ -81,7 +90,9 @@ function toggleInteropComponent() {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vdom-vapor-in-out">
|
|
|
- <button @click="toggleVdom = !toggleVdom">switch between vdom/vapor component in-out mode</button>
|
|
|
+ <button @click="toggleVdom = !toggleVdom">
|
|
|
+ switch between vdom/vapor component in-out mode
|
|
|
+ </button>
|
|
|
<div>
|
|
|
<Transition name="fade" mode="in-out">
|
|
|
<VaporCompA v-if="toggleVdom" />
|