這是一個實現(xiàn)了滑動側(cè)邊欄效果的終端文本界面應(yīng)用，具體的效果可以在我的這期視頻的結(jié)尾看到～

按下“O”鍵時側(cè)邊欄就會被平滑地呼出，再按一次就會隱藏；過渡的動畫效果也非常順滑。

對應(yīng)的 CSS 文件源碼：

在這個 CSS 里，我們首先定義了 Screen 類的兩個圖層："basic" 和 "sidebar"。其中，basic 層是處于底部的，sidebar 層默認覆蓋在它上面。

各組件中，"welcome" 是處于 basic 層的，而 "sidebar" 是處于 sidebar 層的。因此，在最終的成品里，側(cè)邊欄是會覆蓋在文本框的上面的。

在 Python 代碼中，我們綁定了 O 鍵，使得它被按下時，sidebar 組件會變成 "-active" 狀態(tài)。在 CSS 中，我們定義了該狀態(tài)的特點：偏移值為0。由于 sidebar 的默認偏移值為橫向的負100（默認處于頻幕的范圍外面），所以組件變成 "-active" 狀態(tài)時，它會出現(xiàn)在頻幕的內(nèi)部，被我們看到。

這一過程被添加了動畫效果，這是通過 transition 設(shè)置的。"transition: offset 500ms in_out_cubic" 規(guī)定了使用滑動滑出的動畫效果實現(xiàn) offset 屬性的變化，并給定時間為500毫秒。