Animation

  • 8.1 Show & Hide

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

    显示或隐藏元素。

    1. // jQuery
    2. $el.toggle();
    3. // Native
    4. if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
    5. el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
    6. } else {
    7. el.style.display = 'none';
    8. }
  • 8.3 FadeIn & FadeOut

    1. // jQuery
    2. $el.fadeIn(3000);
    3. $el.fadeOut(3000);
    4. // Native
    5. el.style.transition = 'opacity 3s';
    6. // fadeIn
    7. el.style.opacity = '1';
    8. // fadeOut
    9. el.style.opacity = '0';
  • 8.4 FadeTo

    调整元素透明度。

    1. // jQuery
    2. $el.fadeTo('slow',0.15);
    3. // Native
    4. el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
    5. el.style.opacity = '0.15';
  • 8.5 FadeToggle

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

    1. // jQuery
    2. $el.fadeToggle();
    3. // Native
    4. el.style.transition = 'opacity 3s';
    5. const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
    6. if (opacity === '1') {
    7. el.style.opacity = '0';
    8. } else {
    9. el.style.opacity = '1';
    10. }
  • 8.6 SlideUp & SlideDown

    1. // jQuery
    2. $el.slideUp();
    3. $el.slideDown();
    4. // Native
    5. const originHeight = '100px';
    6. el.style.transition = 'height 3s';
    7. // slideUp
    8. el.style.height = '0px';
    9. // slideDown
    10. el.style.height = originHeight;
  • 8.7 SlideToggle

    滑动切换显示或隐藏。

    1. // jQuery
    2. $el.slideToggle();
    3. // Native
    4. const originHeight = '100px';
    5. el.style.transition = 'height 3s';
    6. const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
    7. if (parseInt(height, 10) === 0) {
    8. el.style.height = originHeight;
    9. }
    10. else {
    11. el.style.height = '0px';
    12. }
  • 8.8 Animate

    执行一系列 CSS 属性动画。

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