8. Animation

8.1 Show & Hide

// jQuery
$el.show();
$el.hide();
// Native
// 更多 show 方法的细节详见 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

8.2 Toggle

显示或隐藏元素。

// jQuery
$el.toggle();
// Native
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
  el.style.display = 'none';
}

8.3 FadeIn & FadeOut

// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);
// Native
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';

8.4 FadeTo

调整元素透明度。

// jQuery
$el.fadeTo('slow',0.15);
// Native
el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
el.style.opacity = '0.15';

8.5 FadeToggle

动画调整透明度用来显示或隐藏。

// jQuery
$el.fadeToggle();
// Native
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
  el.style.opacity = '0';
} else {
  el.style.opacity = '1';
}

8.6 SlideUp & SlideDown

// jQuery
$el.slideUp();
$el.slideDown();
// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;

8.7 SlideToggle

滑动切换显示或隐藏。

// jQuery
$el.slideToggle();
// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
  el.style.height = originHeight;
}
else {
 el.style.height = '0px';
}

8.8 Animate

执行一系列 CSS 属性动画。

// jQuery
$el.animate({ params }, speed);
// Native
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) =>
  el.style[key] = params[key];
)