Currently, I am diving into the world of Vue and finding it quite engaging. One feature I am working on involves having a tab that is fixed to the bottom of the browser window upon page load. The tab should then slide up when clicked to display additional content.
So far, everything seems to be running smoothly. I have successfully implemented the sticky tab at the bottom of the page, and the click events are functioning as expected.
However, I have encountered an issue in calculating the height of the tab (and corresponding div) to properly adjust the CSS property. As a result, when the page first loads, users can visibly see the tab sliding down before settling into place. Ideally, I would like the tab to remain hidden until all calculations are finalized and it seamlessly appears in its correct position.
The code snippet I am currently using:
app.js
new Vue({
el: '#info',
delimiters: ['${', '}'],
data: {
active: false,
inactive: true,
styles: {
'bottom': 0
},
},
methods() {
toggle: function (event) {
event.preventDefault();
this.active = !this.active;
this.inactive = !this.inactive;
}
},
mounted() {
let tabHeight = this.$refs.infoTab.clientHeight;
let boxHeight = this.$refs.infoBox.clientHeight; // 473px
this.styles.bottom = -boxHeight + 'px';
}
});
HTML
<div class="info not-active" id="info" @click="toggle" ref="infoTab"
v-cloak
v-bind:class="{ active: active }"
v-bind:style="styles">
<!-- content -->
</div>
style.css
[v-cloak] {
display: none;
}
/* more classes */
.info {
width: 100%;
position: fixed;
&.inactive {
bottom: -100%;
}
&.active {
bottom: 0 !important;
}
}
I feel like I'm very close to achieving the desired outcome; however, I want to eliminate the visible sliding effect for users. My attempts with the created hook did not yield the expected results due to the absence of clientHeight.
Any insights or suggestions on how to address this challenge would be greatly welcomed!