@thinkpixellab-public/px-vue 3.0.57 → 3.0.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Transitions between two items from a collection without the requirement of pre-rendering of all
|
|
3
|
+
items. It does this by maintaing a dynamic collection of items and using TransitionGroup.
|
|
4
|
+
|
|
5
|
+
Example (would crossfade a background image based on the selected item):
|
|
6
|
+
|
|
7
|
+
<PxTransitionItem
|
|
8
|
+
:class="bem('background')"
|
|
9
|
+
:item="selectedBackgroundImage"
|
|
10
|
+
>
|
|
11
|
+
<template #default="{ item }">
|
|
12
|
+
<div
|
|
13
|
+
:class="bem('background-image')"
|
|
14
|
+
:style="{ backgroundImage: cssUrl(item) }"
|
|
15
|
+
/>
|
|
16
|
+
</template>
|
|
17
|
+
</PxTransitionItem>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
-->
|
|
22
|
+
<template>
|
|
23
|
+
<transition-group
|
|
24
|
+
:class="bem()"
|
|
25
|
+
:name="transitionName ? transitionName : 'px-transition-item__fade'"
|
|
26
|
+
tag="div"
|
|
27
|
+
>
|
|
28
|
+
<div
|
|
29
|
+
:class="[bem('item'), itemClass]"
|
|
30
|
+
v-for="item in items"
|
|
31
|
+
:key="item.id"
|
|
32
|
+
:style="{
|
|
33
|
+
transitionDuration: transitionDurationMs ? transitionDurationMs + 'ms' : null,
|
|
34
|
+
}"
|
|
35
|
+
>
|
|
36
|
+
<slot :item="item.item" name="default" />
|
|
37
|
+
</div>
|
|
38
|
+
</transition-group>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script>
|
|
42
|
+
export default {
|
|
43
|
+
name: 'px-transition-item',
|
|
44
|
+
props: {
|
|
45
|
+
item: { default: null },
|
|
46
|
+
itemClass: { default: null },
|
|
47
|
+
transitionName: { default: null },
|
|
48
|
+
transitionDurationMs: { type: Number, default: null },
|
|
49
|
+
},
|
|
50
|
+
data() {
|
|
51
|
+
return { items: [], currentId: 0 };
|
|
52
|
+
},
|
|
53
|
+
watch: {
|
|
54
|
+
item: {
|
|
55
|
+
immediate: true,
|
|
56
|
+
handler(nv, ov) {
|
|
57
|
+
// compare similar objects
|
|
58
|
+
|
|
59
|
+
if (nv && ov && typeof nv == 'object' && typeof ov == 'object') {
|
|
60
|
+
const nvstr = JSON.stringify(nv);
|
|
61
|
+
const ovstr = JSON.stringify(ov);
|
|
62
|
+
|
|
63
|
+
if (nvstr == ovstr) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
if (ov && this.items.length) {
|
|
69
|
+
this.items.shift();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
if (nv) {
|
|
73
|
+
this.items.push({ id: this.currentId++, item: nv });
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
</script>
|
|
80
|
+
|
|
81
|
+
<style lang="scss">
|
|
82
|
+
@import '@/styles/include.scss';
|
|
83
|
+
|
|
84
|
+
// background change transition
|
|
85
|
+
@include vue-transition-fade(px-transition-item__fade, $dur: 0.5s);
|
|
86
|
+
|
|
87
|
+
.px-transition-item {
|
|
88
|
+
position: relative;
|
|
89
|
+
display: grid;
|
|
90
|
+
grid-template-columns: minmax(0, 1fr);
|
|
91
|
+
grid-template-rows: minmax(0, 1fr);
|
|
92
|
+
|
|
93
|
+
&__item {
|
|
94
|
+
grid-area: 1 / 1;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
</style>
|