javascript - 将 jQuery 缓动 easeInExpo 函数重写为普通的 javascript 和 css

Question

所以我有这个很棒的小代码块，我试图在没有 jQuery 的情况下将其重写为纯 JavaScript 和 CSS。

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 过渡，但只是想知道选项是什么？在我的代码中，我有一个 slideDown 和 up 缓动函数。这在生产中用于移动菜单导航。

Answer 1

更新:
This github repo (你不需要 jQuery)有一个非常全面的常用 jQuery 函数列表，全部用 vanilla Javascript 重写。
它包括动画、查询选择器、ajax、事件和其他高级 jQuery 功能。
稍老的youmightnotneedjquery.com也非常好，特别是如果您需要支持较旧的 IE 版本。
您可以实现easeInExpo使用以下 CSS 设置动画样式，由 this website 提供:

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

下面的例子说明了 height 上的缓动属性。一个div。我已对其进行了更新，以匹配您在 jQuery 中添加的单击延迟(35 毫秒)、时间(分别为 300 毫秒和 550 毫秒)以及 jQuery 的默认缓动('swing')——由 this 提供答案 - 当它关闭时:

let expandable = document.getElementById('expandable');
let expandButton = document.getElementById('expand-button');

expandButton.addEventListener('click', () => {
  expandable.classList.toggle('expanded');
});

#expandable {
  background: red;
  transition: all 550ms cubic-bezier(.02, .01, .47, 1);
  height: 0px;
  width: 100px;
  transition-delay: 0ms;
}

#expandable.expanded {
  height: 100px;
  transition-delay: 35ms;
  transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}

<div id="expandable"></div>
<br />
<button id="expand-button">Toggle expand</button>