将 jQuery 缓动 easeInExpo 函数重写为纯 javascript 和 css

Question

所以我有这个很棒的小代码块，我正在尝试将其重写为纯 JavaScript 和 CSS，而不使用 jQuery。

jQuery.extend(jQuery.easing,{
    easeInExpo: function (x, t, b, c, d) {
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    }
}); 

var nset = false;
$('button#hmenu').click(function(){
    if(!nset){
        $('ul#nav').delay(35).slideDown(300,'easeInExpo');
        $('button#hmenu').addClass('active');
        nset = true;
    } else {
        $('ul#nav').slideUp(550);
        nset = false;
        $('button#hmenu').removeClass('active');
    }
})  

我正在查看一些使用缓动的 CSS 过渡，但只是想知道有哪些选项？在我的代码中，我有一个向下滑动和向上滑动的缓动函数。这用于移动菜单导航的生产。

Answer 1

更新：

\n

这个 github 存储库（你不需要 jQuery）有一个非常全面的常见 jQuery 函数列表，全部用普通 Javascript 重写。

\n

它包括动画、查询选择器、ajax、事件和其他高级 jQuery 功能。

\n

稍旧的youmightnotneedjquery.com也非常好，特别是如果您需要支持较旧的 IE 版本。

\n

您可以easeInExpo使用本网站提供的以下 CSS 来实现样式动画：

\n

transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);\n

\n

height下面的示例说明了div 的缓动属性。我已经更新它以匹配您在 jQuery 中添加的单击时的延迟（35 毫秒）、计时（分别为 300 毫秒和 550 毫秒）以及 jQuery 的默认缓动（“swing”）\xe2\x80 \x93如此答案 \xe2\x80\x93 关闭时提供的那样：

\n

\r\n

\r\n

transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);\n

\r\n

let expandable = document.getElementById(\'expandable\');\nlet expandButton = document.getElementById(\'expand-button\');\n\nexpandButton.addEventListener(\'click\', () => {\n  expandable.classList.toggle(\'expanded\');\n});

\r\n

#expandable {\n  background: red;\n  transition: all 550ms cubic-bezier(.02, .01, .47, 1);\n  height: 0px;\n  width: 100px;\n  transition-delay: 0ms;\n}\n\n#expandable.expanded {\n  height: 100px;\n  transition-delay: 35ms;\n  transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);\n}

\r\n

\r\n

\r\n

\n