Nativescript - 如何隐藏底部下方的菜单？

Question

我有这两张图片，其中一张在另一张之上：（推特图片和黑色图片）：

黑色图像应该隐藏在底部 - 当用户点击推特页面时 - 黑色菜单应该从底部滑入。

黑色图像位于中间（在另一个图像的顶部），因为外部 Gridview 没有任何行 - 所以所有内容都作为 z-index 堆栈放置：

<GridLayout   columns="*"  >
 <GridLayout slide-out>
        <Image src="~/images/page.png"    ></Image>
    </GridLayout>

    <StackLayout slide-in class="slide b" height="300" >
        <Image   src="~/images/replies.png" "></Image>
    </StackLayout>
</GridLayout>

但是黑色图像（由 Stacklayout 保存）应该像这样隐藏在底部：

是否可以通过css将其隐藏在底部？

到目前为止我尝试了什么？

如您所见，Stacklayout 上有一个指令（名为 slide-in）：

所以我在启动时设置了它的marginBottom：

 constructor(el: ElementRef) {
        this.element.nativeElement.marginBottom = 0;
    }

但 Stacklayout 保持不变（在中间）/

如果我设置

 this.element.nativeElement.marginBottom = -screen.mainScreen.heightDIPs;

它显示：

但它应该完全隐藏在底部

问题：

如何将其隐藏在底部？

Answer 1

在 y 轴上使用 translate，因此 translate-y=-400 还将不透明度设置为 0，并使用动画 API 为这两个属性设置动画，以便视图组件进行动画进出。我在开发日的演讲涵盖了这一点，这个例子在我的一个 repo 上。现在在电话上，否则我会链接它。