I've been working on creating a Bottomsheet in Stencil, but I'm facing an issue where it shows up suddenly when activated. My goal is to display the overlay when the active property is set, and then smoothly slide up the content. Below is my component code along with its corresponding style:
Component:
import { Component, Prop, State, h, Listen } from '@stencil/core'
@Component({
tag: 'my-bottomsheet',
styleUrl: 'my-bottomsheet.scss',
shadow: true
})
export class myBottomSheet {
@State() active: boolean = false;
toggle() {
this.active = true;
}
render() {
return (
<div class="my-bottomsheet">
<button onClick={() => this.toggle()}>Show</button>
{ this.active &&
<div class="my-bottomsheet-overlay">
<div class="my-bottomsheet-content">
<span>This is the content!</span>
</div>
</div>
}
</div>
)
}
}
Style:
.my-bottomsheet-overlay {
height: 100%;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
}
.my-bottomsheet-content {
background-color: #fff;
overflow: hidden;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(0);
transition: transform 0.5s; /* Added missing unit for animation duration */
}
The desired behavior is for the overlay to appear suddenly while the content smoothly slides up. Could you provide guidance on what may be missing or incorrect in my implementation?