空间界面：将容器来回移动到侧边栏

Question

我正在尝试创建一个相当复杂的动画，其中内容调整进出侧边栏。这是一个快速的Keynote原型来解释我之后的事情：

我开始使用flex-box并将flex-direction从行更改为列，以及将容器div移动到＆＃34; sidebar＆＃34;在左边。但事实证明，flex-direction is not animatable.

然后我看了一眼Alex Maccaw's Magic Move jQuery plugin，但我还没能到达那里。同样使用绝对定位和动画定位。

对方法的建议很棒。

Answer 1

我使用链式CSS animations实现了这一点。结果如下：http://codepen.io/chrisdarroch/full/PNjpaG/

解决方案的关键是创建两组元素 - 导航项和面板 - 然后为基本状态和＆＃34;活动＆＃34;创建动画。各州的状况。

.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％完成，但您可能会了解如何链接动画以实现您的设计。