空間接口：將容器前后移動到側邊欄

Question

我正在嘗試創建一個相當復雜的動畫，在該動畫中，內容的大小將調整為側邊欄的大小。 這是一個快速的Keynote原型，用於說明我所追求的：

我開始使用flex-box並將彈性方向從行更改為列，並將容器div移動到左側的“側邊欄”。 但是事實證明， 伸縮方向是不能動畫的。

然后，我看了一下Alex Maccaw的Magic Move jQuery插件 ，但是我還無法做到這一點。 使用絕對定位和動畫位置同樣如此。

關於方法的建議會很棒。

Answer 1

我使用鏈接的CSS動畫實現了這一點。 結果如下： http : //codepen.io/chrisdarroch/full/PNjpaG/

解決方案的關鍵是創建兩組元素-導航項和面板-然后為每個組的基本狀態和“活動”狀態設置動畫。

.nav-item {
  animation: grow 1*$n ease-in;
  animation-fill-mode: both;

  &.active {
    animation: fade 0s 1*$n, shrink 1*$n linear 3*$n;
    animation-fill-mode: forwards;
  }
}

.panel {
  animation: grow 0*$n linear;
  animation-fill-mode: both;


  &.active {
    animation: appear 0s linear 1*$n, slidein 1*$n ease-out 1*$n;
    animation-fill-mode: both;
  }

  &.inactive {
    animation: shrink 1*$n linear;
    animation-fill-mode: both;
  }
}

為了簡潔起見，我省略了每個@keyframe動畫的實現。 檢查codepen的完整源代碼。

上面是用SCSS編寫的。 要注意的重要事項是$n變量。 這是一個以秒為單位的值，例如$n: 0.5s 。 它用於協調動畫每個階段的延遲時間和動畫時間。

我的解決方案並不是100％完整的，但是您可能會了解如何鏈接動畫以實現設計。