Skip to content

Commit 585dc96

Browse files
committed
fix(datepicker): Only position leaving cells absolutely
1 parent 527c0fc commit 585dc96

File tree

2 files changed

+7
-43
lines changed

2 files changed

+7
-43
lines changed

src/components/PickerCells.vue

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,6 @@ export default {
3333
required: true,
3434
},
3535
},
36-
data() {
37-
return {
38-
cellHeight: 0,
39-
}
40-
},
41-
computed: {
42-
wrapperHeight() {
43-
const columns = this.view === 'day' ? 7 : 3
44-
const rows = Math.ceil(this.cells.length / columns)
45-
46-
return rows * this.cellHeight
47-
},
48-
},
49-
watch: {
50-
wrapperHeight() {
51-
this.$parent.$refs.cellsWrapper.style.height = `${this.wrapperHeight}px`
52-
},
53-
},
54-
mounted() {
55-
this.cellHeight = this.getCellHeight()
56-
},
5736
methods: {
5837
/**
5938
* Set the classes for a specific cell
@@ -82,22 +61,6 @@ export default {
8261
},
8362
]
8463
},
85-
86-
/**
87-
* Get the cell height
88-
*/
89-
/* eslint no-param-reassign: 0 */
90-
getCellHeight() {
91-
const popup = this.$parent.$parent.$el
92-
const originalDisplay = popup.style.display
93-
const originalVisibility = popup.style.visibility
94-
popup.style.display = 'block'
95-
popup.style.visibility = 'hidden'
96-
const height = this.$el.children[0].offsetHeight
97-
popup.style.display = originalDisplay
98-
popup.style.visibility = originalVisibility
99-
return height
100-
},
10164
},
10265
}
10366
</script>

src/styles/style.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,17 +194,16 @@
194194
.cells-wrapper {
195195
overflow: hidden;
196196
position: relative;
197-
transition-duration: 250ms;
198-
transition-timing-function: ease-in-out;
199197

200198
.picker-cells {
201-
transition-duration: 250ms;
202-
transition-timing-function: ease-in-out;
199+
transition: all 250ms ease-in-out;
203200
}
204201
}
205202

206-
.slide-right-leave-active,
207203
.slide-right-enter-active {
204+
top: 0;
205+
}
206+
.slide-right-leave-active {
208207
position: absolute;
209208
top: 0;
210209
}
@@ -215,8 +214,10 @@
215214
transform: translate(-100%, 0);
216215
}
217216

218-
.slide-left-leave-active,
219217
.slide-left-enter-active {
218+
top: 0;
219+
}
220+
.slide-left-leave-active {
220221
position: absolute;
221222
top: 0;
222223
}

0 commit comments

Comments
 (0)