Html CSS：如何按顺序设置宽度、高度和不透明度的动画

我有一个显示链接列表的左栏。单击折叠图标时，我希望按顺序执行以下操作：

文本将逐渐淡出

要减小到设定宽度的条的宽度（动画）

让图标淡入

用户界面现在应该是一个左栏，有两个图标，没有文本

之后单击展开按钮时，我希望出现相反的情况

要淡出的图标

要增加到设定宽度的条的宽度（动画）

让文本淡入

用户界面现在应该恢复正常，宽度增加，每个LI显示其标题和描述。没有图标

下面是我所能做到的。我将使用Javascript框架通过基于数据切换类来执行此操作，但出于演示目的，我连接了一个按钮，用jQuery切换菜单状态

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'.container'）.toggleClass（“toggleOn-toggleOff”）；
})
})

正文{
保证金：0；
}
保险商实验室{
列表样式：无；
}
.图标{
宽度：20px；
高度：20px；
边界半径：100%；
背景：#007cbe；
不透明度：0；
}
.文本h2，
.文本p{
边距：0；填充：0；
}
李{
边缘底部：20px；
}
.文本{
最大高度：200px；
}
/*过渡*/
.toggleOn.text{
溢出：隐藏；
过渡延迟：5000ms；
最大高度：0px；
不透明度：0；
过渡：最大高度0毫秒5000毫秒，不透明度4000毫秒0毫秒；
}
.切换.菜单滑块{
溢出：隐藏；
过渡延迟：5000ms；
宽度：8雷姆；
过渡：宽度2000ms 5000ms；
}
.toggleOff.菜单滑块{
宽度：20雷姆；
}
.切换.菜单滑块{
背景：橙色；
}
.toggleOff.菜单滑块{
背景：粉红色；
}

标题
描述



标题2
说明2



测试已解决


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'.container'）.toggleClass（“toggleOn-toggleOff”）；
})
})
body，
.文本h2，
.文本p，
保险商实验室{
边距：0；填充：0；
}
.集装箱{
宽度：100%；
身高：100%；
}
.菜单滑块{
身高：100%；
}
保险商实验室{
列表样式：无；
}
李{
填充：10px0；
}
.图标{
宽度：0rem；
高度：0雷姆；
边界半径：100%；
背景：#007cbe；
不透明度：0；
}
.文本{
最大高度：200px；
}
/*过渡*/
.toggleOn.text{
溢出：隐藏；
最大高度：0px；
不透明度：0；
过渡：最大高度0毫秒5000毫秒，不透明度4000毫秒0毫秒；
}
.切换.菜单滑块{
溢出：隐藏；
过渡延迟：5000ms；
宽度：8雷姆；
过渡：宽度2000ms 5000ms；
}
.toggleOn.icon{
溢出：隐藏；
宽度：2em；
高度：2em；
不透明度：100；
背景颜色：紫色；
过渡：不透明度1000ms 9000ms，宽度1000ms 9000ms，高度1000ms 9000ms；
}
.toggleOff.icon{
溢出：隐藏；
宽度：0rem；
高度：0雷姆；
不透明度：0；
过渡：不透明度150ms-0ms，宽度150ms-4000ms，高度150ms-4000ms；
}
.toggleOff.菜单滑块{
溢出：隐藏；
宽度：20雷姆；
过渡段：宽度2000ms 6000ms；
}
.toggleOff.text{
溢出：隐藏；
最大高度：300px；
不透明度：100；
过渡：最大高度0毫秒6000毫秒，不透明度4000毫秒7000毫秒；
}
.切换.菜单滑块{
背景：橙色；
}
.toggleOff.菜单滑块{
背景：粉红色；
}



标题
描述



标题2
说明2



测试