整站侧边栏开发实践（三）——转场

转场，即是其字面意思，从场景转换到另一个场景，做过单页应用的同学相必对转场两字并不默认。在整站侧边栏的需求中，各个栏目的内容在切换的过程中需要一些过渡效果，这里就借用单页应用中常见的术语，姑且称之为“转场效果”了。

既然名字都是借鉴单页应用而来的，那么技术实现上自然也是仿照单页应用的转场实现。接下来我们就聊聊转场效果的实现。

入场与出场

侧边栏中每一个栏目的内容对应的转场效果都需要有两个过渡效果，即入场效果与出场效果，这里我们仅以 CSS3 方式实现这两种过渡效果。对于 IE8，就让它自便吧。

入场效果

我比较喜欢 POP 效果，这里仅以 POP 效果做例子。

首先需要知道的是，在内容区域，隐藏着 N 个栏目的内容面板（div 元素）。

<div class="bar-panel cart-panel"></div>
<div class="bar-panel favor-panel"></div>
...

我们需要给所有的面板加上一些样式，以满足我们后续的动画需求和隐藏需求。

.bar-panel {
  position: absolute; width: 100%; height: 100%; z-index: 2;
  transform-origin: 50% 50%;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: scale(0.8);\
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

从设置的样式中可以看出，面板默认是隐藏不可见的。接下来我们设置一个 class 做入场效果。

.panel.fly {
  opacity: 1;
  transform: scale(1);
  filter: alpha(opacity=100);
}

在入场时，内容面板会放大并显示出来。

接下来我们实现出场效果。

出场效果

出场效果的设计和入场效果如出一辙，也是给面板加一个 class 以实现出场。稍微要留意的是，为了方便控制面板的入场与出场，我们可以将出场效果设计成一个开关，即加上出场效果的 class 时就出场，去掉这个 class 时就入场。

.bar-panel.fly.reverse {
  transform: scale(.8);
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: 1;
}

出场时缩小并隐藏。

最后我们如何控制出场与入场呢？简单的增加或去除 reverse 类即可。

$('.bar-panel').addClass('reverse') // 全部出场
obj.panel.removeClass('reverse')   // 当前栏目内容面板入场

我们来看下最后效果：

YIXUNFE / blog