Radlist查看可折叠项目动画

Question

我正在尝试通过点击任意项目来打开和关闭radlist查看项目的子详细信息。 这样，如果我点击该项目，它将打开子视图并再次关闭。

我创建了一个平台示例，并在其中实现了可折叠的radlist视图 https://play.nativescript.org/?template=play-js&id=jJqwjY&v=2

但是我需要用动画慢慢地扩展它。我很少阅读这些文档，但在google上搜索没有结果。

任何人都可以将动画添加到上述项目中，从而从上到下缓慢打开可折叠视图。然后以同样的方式慢慢关闭。

已更新 ：
我以某种方式获得了相对接近的动画，对此， https://play.nativescript.org/?template=play-js&id=jJqwjY&v=4

@keyframes animation {
    from { 
        height: 0;
        overflow:hidden;
        background-color: gold;
        transition: height 1s ease;
    }
    100% { 
        transform:   translate(0,0);
       /* height: auto */ // This is also not working
        height: 100px; } // HOW TO GIVE HEIGHT DYNAMICALLY HERE
}

由于硬编码的高度，我没有得到手风琴效果，因为不同的元素具有不同的高度。