动效

动效为CSS3动画效果，框架用.effect定义动效样式；动效果执行分四种类型，一是直接执行，则使用.effect叠加动效样式即可(如.effect.fadein)；二为悬浮执行动效，则使用.effect-hover叠加动效样式(如.effect-hover.fadein)；三为上级元素悬浮动效，则上级元素使用.effect-hover；四为上级元素叠加样式执行动态，则上级元素在使用.effect的基础上叠加.active样式时执行动效。

执行示例

直接/悬浮执行

即为直接在元素上叠加.effect或.effect-hover样式，使元素直接显示动态或悬浮使用动效。

直接执行

悬浮执行

    <div class="effect fadein">直接执行</div>
    <div class="effect-hover fadein">悬浮执行</div>

上级悬浮/叠加执行

即为上级元素使用.effect-hover或.effect.active样式，使元素直接显示动态或悬浮使用动效。

上级悬浮

上级叠加

    <div class="effect-hover">
      <div class="fadein">上级悬浮</div>
    </div>
    <div class="effect active">
      <div class="fadein">上级叠加</div>
    </div>

淡入动效

淡入：

淡入

上淡入

下淡入

左淡入

右淡入

    <div class="effect-hover">
      <div class="fadein">淡入</div>
    </div>
    <div class="effect-hover">
      <div class="fadein fadein-top">上淡入</div>
    </div>
    <div class="effect-hover">
      <div class="fadein fadein-bottom">下淡入</div>
    </div>
    <div class="effect-hover">
      <div class="fadein fadein-left">左淡入</div>
    </div>
    <div class="effect-hover">
      <div class="fadein fadein-right">右淡入</div>
    </div>

淡出动效

淡出

上淡出

下淡出

左淡出

右淡出

    <div class="effect-hover fadeout">淡出</div>
    <div class="effect-hover fadeout fadeout-top">上淡出</div>
    <div class="effect-hover fadeout fadeout-bottom">下淡出</div>
    <div class="effect-hover fadeout fadeout-left">左淡出</div>
    <div class="effect-hover fadeout fadeout-right">右淡出</div>

位移动效

上位移

下位移

左位移

右位移

    <div class="effect-hover offset-top">上位移</div>
    <div class="effect-hover offset-bottom">下位移</div>
    <div class="effect-hover offset-left">左位移</div>
    <div class="effect-hover offset-right">右位移</div>

缩放动效

放大

缩小

    <div class="effect-hover">
      <div class="scale">放大</div>
    </div>
    <div class="effect-hover">
      <div class="shrink">缩小</div>
    </div>

开关动效

在一定宽高元素内，可使用开关动态。

宽展开

高展开

宽关闭

高关闭

    <div class="effect-hover" style="width:120px;height:120px;">
      <div class="open-width"></div>
    </div>
    <div class="effect-hover" style="width:120px;height:120px;">
      <div class="open-height"></div>
    </div>
    <div class="effect-hover" style="width:120px;height:120px;">
      <div class="close-width"></div>
    </div>
    <div class="effect-hover" style="width:120px;height:120px;">
      <div class="close-height"></div>
    </div>

旋转动效

旋转

旋转一次

    <div class="effect-hover rotate">旋转</div>
    <div class="effect-hover rotate-once">旋转一次</div>

替换动效

在限定元素高的情况下，可使用替换动态，因有替换元素，替换动效只能使用上级元素的效果。

替换

换替

    <div class="effect-hover" style="height:120px;">
      <div class="change">替换</div>
      <div class="change">换替</div>
    </div>