Anima-pop NPM | npm.io

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' : 渐变出现消失