CSS是前端開發中非常重要的一部分，它可以為網頁賦予各種各樣的樣式和效果。今天我們來學習一下如何使用CSS實現伸縮滑移列表。

首先，我們需要一個HTML結構來創建我們的列表。在這個例子中，我們使用一個ul元素來創建我們的列表。

<ul class="list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
</ul>

接著，我們使用CSS添加樣式到我們的列表。我們需要添加一些基本的樣式來設置我們的列表項，并且為我們的列表項添加動畫效果。下面是CSS代碼：

.list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.list li {
margin: 10px;
background-color: #eee;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.list li:hover {
background-color: #ccc;
}

我們現在已經有了一個基本的列表，接下來是實現伸縮滑移效果。我們需要一些額外的CSS來創建伸縮滑移效果。下面是CSS代碼：

.list li.expanded {
height: auto;
overflow: visible;
}
.list li.collapsed {
height: 0px;
overflow: hidden;
}
.list li.sliding {
transition: all 0.3s ease-in-out;
}

現在我們有了所有需要的CSS代碼。我們需要一些JavaScript來實現伸縮滑移效果。下面是使用jQuery實現的JavaScript代碼：

$(function() {
$('.list li').click(function() {
var $li = $(this);
if ($li.hasClass('collapsed')) {
$li.addClass('sliding').removeClass('collapsed').addClass('expanded');
} else {
$li.addClass('sliding').removeClass('expanded').addClass('collapsed');
}
$li.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(e) {
$li.removeClass('sliding');
});
});
});

我們現在已經為我們的列表添加了伸縮滑移效果。當我們點擊某個列表項時，它會伸展開并顯示更多信息，再次點擊它則會折疊回去。通過使用CSS和JavaScript，我們可以輕松地為我們的網頁添加一些有趣的動畫效果。

希望這篇文章對你有所幫助，謝謝觀看！