domkit中文文档|domkit js中文教程|解析

npm npmdoc 2年前 (2022-01-01) 446次浏览

domkit中文文档|domkit js中文教程|解析

安装命令:npm i domkit

DOM 套件

DOM 工具包

npm install domkit --save

插入关键帧规则

var insertKeyframesRule = require('domkit/insertKeyframesRule');
var keyframes = {
  '0%': {
    transform: 'scale(1)'
  },
  '50%': {
    transform: 'scale(0.5)',
    opacity: 0.7
  },
  '100%': {
    transform: 'scale(1)',
    opacity: 1
  }
};
 
var animationName = insertKeyframesRule(keyframes);

插入规则

var insertRule = require('domkit/insertRule');
var css = '.foo {}'
insertRule(css);

附加供应商前缀

var appendVendorPrefix = require('domkit/appendVendorPrefix');
var style = {
  transform: 'scaleX(1)'
}
appendVendorPrefix(style);

获取供应商前缀

var getVendorPrefix = require('domkit/getVendorPrefix');
var vendorPrefix = getVendorPrefix(); // => -webkit-

添加类

var addClass = require('domkit/addClass');
addClass(this.getDOMNode(), 'foo');

移除类

var removeClass = require('domkit/removeClass');
removeClass(this.getDOMNode(), 'foo');

有类

var hasClass = require('domkit/hasClass');
hasClass(this.getDOMNode(), 'foo'); // => true

过渡事件

var transitionEvents = require('domkit/transitionEvents');
transitionEvents.addEndEventListener(node, eventListener);
transitionEvents.removeEndEventListener(node, eventListener);

类名

var classNames = require('domkit/classNames');
 
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
 
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'
 
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
 
// Arrays will be recursively flattened as per the rules above:
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

可以使用DOM

var canUseDOM = require('domkit/canUseDOM');
if(canUseDOM){
  // balabala
}

添加事件监听器

var addEventListener = require('domkit/addEventListener');
addEventListener(window, 'scroll', handle)

移除事件监听器

var removeEventListener = require('domkit/removeEventListener');
removeEventListener(window, 'scroll', handle)

风门

var throttle = require('domkit/throttle');
throttle(fn, 100)

结束转换

var onEndTransition = require('domkit/onEndTransition');
onEndTransition(el, handle)

视口内

var inViewport = require('domkit/inViewport');
inViewport(el) // true if elem is in the current viewport
inViewport(el, 100) // true if elem is in the current viewport or within 100px of it
inViewport(el, -100) // true if elem is in the current viewport and not within 99px of the edge

浏览器支持

IE 铬合金 火狐 歌剧 苹果浏览器
IE 6+ ✔ 铬 4.0+ ✔ 火狐 16.0+ ✔ 歌剧 15.0+ ✔ Safari 4.0+ ✔
项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:domkit中文文档|domkit js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}