Question

我试图将此jQuery代码转换为ES6并且在转换不透明度时遇到问题。在ES6中是否有jQuery的fadeIn和fadeOut？

这是我尝试将.screen元素的不透明度从0转换为1超过300毫秒的失败尝试。

CSS

.screen {
display: none;
position: fixed;
z-index: 9;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 1;
background: rgba(26, 31, 33, 0.96)
}

JS

(function() {
    document.addEventListener("DOMContentLoaded", function() {
        headerMenu.init();
    });

headerMenu = {

    init: function() {
        let header = document.querySelector('.site-header'),
            w = window,
            lastScrollTop = 0;

        const headerSize = () => {
            const st = document.scrollingElement.scrollTop;
            if ( st >= 180 ){
                header.classList.add('is-scrolling-down');
            } else {
                header.classList.remove('is-scrolling-down');
            }
            lastScrollTop = st;
        }

        w.addEventListener('load', headerSize);
        w.addEventListener('resize', headerSize);
        w.addEventListener('scroll', headerSize);

        w.addEventListener('load', () => {
            let burger = document.querySelector('.mobile-menu-trigger'),
                mask = document.querySelector('.screen');

            const clickHandler = () => {
                if (burger.classList.contains('is-active')) {
                    burger.classList.remove('is-active');
                    mask.style.display = 'none';
                    mask.style.opacity = 0;
                    mask.style.transition = 'opacity 0.3s';
                    document.body.classList.remove('menu-is-active');

                } else {
                    mask.style.display = 'inline';
                    mask.style.opacity = 1;
                    burger.classList.add('is-active');                 
                    document.body.classList.add('menu-is-active');

                }
            }
            burger.addEventListener('click', clickHandler);
            mask.addEventListener('click', clickHandler);
        })
    }
};

})();

底部的jQuery版本（使用fadeIn和fadeOut）工作

    $(document).ready(function() {
        var burger = $('.mobile-menu-trigger'),
            mask = $('.screen');

        $('.mobile-menu-trigger, .screen').click(function(){
            if(burger.hasClass('is-active')) {
                burger.removeClass('is-active');
                mask.fadeOut(300);
                $('body').removeClass('menu-is-active');
              } else {
                mask.fadeIn(300);
                burger.addClass('is-active');
                $('body').addClass('menu-is-active');
              }
        });
    });

对最后一部分（或更好的方法）的任何帮助都将非常感谢！

Answer 1

这是使用JavaScript淡入/淡出元素的基础/示例......

通常建议使用.requestAnimationFrame()，因为它会在浏览器准备就绪时触发，而不是试图强制动画在您的日程安排上发生（这可能会导致错误的结果）。但requestAnimationFrame的运行速度可能比预期的更快/更慢 - 为了获得精确的结果，可能值得研究如何管理速度。

如果你可以让CSS3工作，它将节省很多头痛并且非常流畅:)否则，我希望这是一个很好的起点，如何使用JS淡入/淡出元素。

＆＃13;

const btn = document.getElementById('fadeTrigger');
const target = document.getElementById('target');

function fadeOut( el, time ){
  // get the amount to change the opacity based on
  // the assumed time
  let step = Number( ( 1 / time ).toFixed( 5 ) );
  // set the element's opacity to 100% (in this case [1])
  el.style.opacity = 1;
  // internal function to call/loop/recurssive over
  function fade(){
    // get the current opacity with the incremental change
    // that we discovered earlier on -- make sure it's a 
    // Number, since if this comes back as a string, it gets messy
    let opacity = Number( el.style.opacity ) - step;
    // Update the element with the new opacity
    el.style.opacity = opacity;
    // Check if the opacity has hit zero [0]
    if( el.style.opacity > 0 ){
      // if the element does not have a zero [0] opacity, then
      // loop back on this function to continue
      window.requestAnimationFrame( fade );
    }else{
      // just to clean things up, if the opacity is less than 0
      // set it to zero [0]
      el.style.opacity = '0';
    }
  }
  fade();
}

// fadeIn is just like fadeOut -- but reversed
function fadeIn( el, time ){
  let step = Number( ( 1 / time ).toFixed( 5 ) );
  el.style.opacity = 0;
  function fade(){
    let opacity = Number( el.style.opacity ) + step;
    el.style.opacity = opacity;
    if( el.style.opacity < 1 ){
      window.requestAnimationFrame( fade );
    }else{
      el.style.opacity = '1';
    }
  }
  fade();
}

btn.addEventListener('click', fadeTrigger);
// Generic switch control to trigger the fadeOut 
// and fadeIn functions
function fadeTrigger(){
  let state = btn.getAttribute('data-state');
  if( state === 'fadein' ){
    fadeOut( target, 30 );
    btn.setAttribute('data-state', 'fadeout');
    btn.innerHTML = 'Fade In';
  }else{
    fadeIn( target, 30 );
    btn.setAttribute('data-state', 'fadein');
    btn.innerHTML = 'Fade Out';
  }
}

＆＃13;

#target{
  height : 200px;
  width  : 200px;
  background-color: red;
}

＆＃13;

<button data-state="fadein" id="fadeTrigger">Fade Out</button>
<br />
<div id="target"></div>

＆＃13;

jQuery转换为Plain JavaScript

1 个答案: