anima-pop

pop

---

浮层，提供了几种显示方式.

---

Usage

浮层控件仅提供了最简单的功能，可以实现弹出选择、模拟转场、Mask等功能

<div id="pop">
  这是浮层的内容。。。。
</div>

var pop = require('anima-pop');
var pop = new Pop({
    element : '#pop',
    width : '100%',
    height : '50%',
    align :  {
      type : 'bottom'
    },
    effect : 'slide',
    direction : 'up'
});

pop.show();

配置项

element element

• 显示的内容对应的html，可以是选择器、DOM

x Number

• 浮层的x坐标，默认为 -999

y Number

• 浮层的y坐标,默认为-999

xy Array

• 浮层的xy坐标，设置，x,y的简写方式

zIndex Number

• z-index,默认为99

mask Boolean

• 是否显示mask，默认为false

visible Boolean

• 是否显示，默认为false

width Number

• 宽度

height Number

• 高度

align Object

• 对齐方式,和偏移量
• align.type : 对齐方式，top,left,bottom,right,center5种 对齐方式
• align.offset : [x,y] 偏移量，在对齐方式的基础上的偏移量

动画相关的属性

effect String

显示隐藏时触发的动画类型：

• 引入pop.css时生效，effect 跟动画的联系是 effect+ 'In', effect+'Out'，如：zoom 动画显示的时候执行动画 @@-webkit-keyframes zoomIn ,隐藏的时候执行 @-webkit-keyframes zoomOut
• 'none' : 没有任何动画，默认值
• 'slide' : 滑动出现、滑动消失
• 'zoom' : 放大出现
• 'fade' : 渐变出现消失

duration Number

• 毫秒数，动画执行的时间,默认值 400ms

easing String

• 动画执行的函数类型，使用的是css3的动画，默认为'linear'

direction String

滑动显示时的方向，反方向隐藏

• 'up' : 向上方滑出，默认值
• 'down' : 向下滑出
• 'left' : 向左滑出
• 'right' : 向右滑出

Api

show() 显示浮层

hide() 隐藏浮层

destroy() 销毁浮层