File size: 1,154 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script>
export default {
components: {
TestComponent: {
render(h) {
return h('div', {}, this.$slots.default)
},
},
},
data() {
return {
show: true,
count: 5,
}
},
}
</script>
<template>
<div>
<div data-test-id="transition">
<button @click="show = !show">
Toggle
</button>
<transition name="fade">
<TestComponent v-if="show">
hello
</TestComponent>
</transition>
</div>
<div data-test-id="transition-list">
<button @click="++count">
Add
</button>
<button @click="--count">
Remove
</button>
<transition-group
name="list"
tag="p"
>
<component
is="TestComponent"
v-for="item in count"
:key="item"
class="list-item"
>
{{ item }}
</component>
</transition-group>
</div>
</div>
</template>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
|