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

Question

我有一个显示链接列表的左栏。当点击一个折叠图标时，我希望以下按顺序发生：

1. 要淡出的文本
2. 要减小到设定宽度的条形宽度(已设置动画(
3. 用于图标淡入

UI现在应该是一个左栏，有两个图标，没有文本。

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

1. 要淡出的图标
2. 要增加到设定宽度的条形宽度(已设置动画(
3. 使文本淡入

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

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

$(document).ready(function(){
$('#button').click(function(){
$('.container').toggleClass("toggleOn toggleOff");
})
})

body {
margin:0;
}
ul {
list-style:none;
}
.icon {
width: 20px;
height: 20px;
border-radius: 100%;
background: #007cbe;
opacity:0;
}
.text h2,
.text p {
margin:0; padding: 0;
}
li {
margin-bottom:20px;
}
.text {
max-height:200px;
}

/* Transitions */
.toggleOn .text {
overflow: hidden; 
transition-delay:5000ms;
max-height: 0px; 
opacity: 0;
transition: max-height 0ms 5000ms, opacity 4000ms 0ms;
}
.toggleOn .menu-slider {
overflow: hidden; 
transition-delay:5000ms;
width: 8rem; 
transition: width 2000ms 5000ms;
}
.toggleOff .menu-slider {
width: 20rem;
}
.toggleOn .menu-slider {
background:orange;
}
.toggleOff .menu-slider {
background:pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container toggleOff">
<div class="menu-slider">
<ul>
<li>
<div class="icon"></div>
<div class="text">
<h2> Title </h2>
<p> Description </p>
</div>
</li>
<li>
<div class="icon"></div>
<div class="text">
<h2> Title 2 </h2>
<p> Description 2 </p>
</div>
</li>
</ul>
</div>  
</div>
<button id="button">Test</button>

Answer 1

已解决。

$(document).ready(function(){
$('#button').click(function(){
$('.container').toggleClass("toggleOn toggleOff");
})
})

body,
.text h2,
.text p,
ul {
margin:0; padding: 0;
}
.container {
width: 100%;
height:100%;
}
.menu-slider {
height: 100%;
}
ul {
list-style:none;
}
li {
padding:10px 0;
}
.icon {
width: 0rem;
height: 0rem;
border-radius: 100%;
background: #007cbe;
opacity:0;
}
.text {
max-height:200px;
}

/* Transitions */
.toggleOn .text {
overflow: hidden; 
max-height: 0px; 
opacity: 0;
transition: max-height 0ms 5000ms, opacity 4000ms 0ms;
}
.toggleOn .menu-slider {
overflow: hidden; 
transition-delay:5000ms;
width: 8rem; 
transition: width 2000ms 5000ms;
}
.toggleOn .icon {
overflow: hidden; 
width: 2rem; 
height: 2rem;
opacity: 100;
background-color:purple;
transition: opacity 1000ms 9000ms, width 1000ms 9000ms, height 1000ms 9000ms;
}

.toggleOff .icon {
overflow: hidden; 
width: 0rem; 
height: 0rem;
opacity: 0;
transition: opacity 150ms 0ms, width 150ms 4000ms, height 150ms 4000ms;
}
.toggleOff .menu-slider {
overflow: hidden; 
width: 20rem; 
transition: width 2000ms 6000ms;
}
.toggleOff .text {
overflow: hidden; 
max-height: 300px; 
opacity: 100;
transition: max-height 0ms 6000ms, opacity 4000ms 7000ms;
}
.toggleOn .menu-slider {
background:orange;
}
.toggleOff .menu-slider {
background:pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container toggleOff">
<div class="menu-slider">
<ul>
<li>
<div class="icon"></div>
<div class="text">
<h2> Title </h2>
<p> Description </p>
</div>
</li>
<li>
<div class="icon"></div>
<div class="text">
<h2> Title 2 </h2>
<p> Description 2 </p>
</div>
</li>
</ul>
</div>  
</div>
<button id="button">Test</button>