Javascript StencilJS-底部板材无法按预期工作。如何向上滑动内容？

我正试着用模版做一张底片。当我激活它时，它会突然出现。我想在设置活动属性时显示覆盖，然后向上滑动内容。以下是我的组件及其样式：

组成部分：

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>
        )
    }
}

---

覆盖应该突然显示，但内容应该向上滑动。我在这里错过了什么或做错了什么？

哇，这里没有错！您不能使用height:auto进行游戏，但可以使用max height或height值。这就是解决办法

.my-bottomsheet-overlay {
    width: 100%;
    height: 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;
    left: 0;
    width: 100%;
    animation: riseUp 0.5s;
    max-height: 300px;
    z-index: 2;
}

@keyframes riseUp{
    0% {
        max-height: 0;
    }

    100% {
        max-height: 300px;
    }
}

这是一个完美的工作底片，如果有人想使用

.my-bottomsheet-overlay {
    width: 100%;
    height: 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;
    left: 0;
    width: 100%;
    animation: riseUp 0.5s;
    max-height: 300px;
    z-index: 2;
}

@keyframes riseUp{
    0% {
        max-height: 0;
    }

    100% {
        max-height: 300px;
    }
}