slide-element:一个 ~700 字节的基于 Promise 的库,用于动画元素的动态高度打开和关闭。 基本上,jQuery 的 slideUp()、slideDown() 和 slideToggle() 的现代变体-源码

上传者: 42131013 | 上传时间: 2021-07-24 20:07:32 | 文件大小: 95KB | 文件类型: ZIP
滑动元素 一个、可访问的、基于 Promise 的、令人联想到 jQuery 的库,用于具有动态高度打开和关闭的滑动元素。 要查看它的实际效果,请查看以下演示: 为什么? 使用 JavaScript 使元素打开和关闭的动画传统上并不是一项简单的任务,尤其是当它包含动态大小的内容时。 您可以使用 ,但该路径需要您执行比必要更多的代码。 另一种选择是使用 CSS 来更改元素的max-height值,但这种方法充满了任意性,并且当您不确定要对多少内容进行动画处理时很难很好地实现。 这个库使用完成工作,它不需要元素具有固定的高度。 相反,元素高度是根据它们的内容计算的,然后应用适当的值来触发平滑的原生过渡。 动画本身由相同的 CSS 转换机制提供支持,使其成为在性能方面实现它的最佳方法之一。 它小巧、光滑,专注于做好一项工作:滑动打开和关闭。 安装 运行npm install slide

文件下载

资源详情

[{"title":"( 21 个子文件 95KB ) slide-element:一个 ~700 字节的基于 Promise 的库,用于动画元素的动态高度打开和关闭。 基本上,jQuery 的 slideUp()、slideDown() 和 slideToggle() 的现代变体-源码","children":[{"title":"slide-element-master","children":[{"title":".gitignore <span style='color:#111;'> 28B </span>","children":null,"spread":false},{"title":"package.json <span style='color:#111;'> 1.29KB </span>","children":null,"spread":false},{"title":"package-lock.json <span style='color:#111;'> 385.77KB </span>","children":null,"spread":false},{"title":"src","children":[{"title":"index.test.js <span style='color:#111;'> 7.89KB </span>","children":null,"spread":false},{"title":"utils","children":[{"title":"pixelate.ts <span style='color:#111;'> 82B </span>","children":null,"spread":false},{"title":"getRawHeight.ts <span style='color:#111;'> 251B </span>","children":null,"spread":false},{"title":"toEachAnimation.ts <span style='color:#111;'> 139B </span>","children":null,"spread":false}],"spread":true},{"title":"index.ts <span style='color:#111;'> 4.96KB </span>","children":null,"spread":false}],"spread":true},{"title":".tool-versions <span style='color:#111;'> 15B </span>","children":null,"spread":false},{"title":"LICENSE <span style='color:#111;'> 746B </span>","children":null,"spread":false},{"title":"tsconfig.json <span style='color:#111;'> 5.93KB </span>","children":null,"spread":false},{"title":".github","children":[{"title":"PULL_REQUEST_TEMPLATE.md <span style='color:#111;'> 84B </span>","children":null,"spread":false},{"title":"ISSUE_TEMPLATE.md <span style='color:#111;'> 26B </span>","children":null,"spread":false},{"title":"CONTRIBUTING.md <span style='color:#111;'> 155B </span>","children":null,"spread":false},{"title":"workflows","children":[{"title":"test.yml <span style='color:#111;'> 449B </span>","children":null,"spread":false},{"title":"publish.yml <span style='color:#111;'> 927B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"README.md <span style='color:#111;'> 7.43KB </span>","children":null,"spread":false},{"title":"index.html <span style='color:#111;'> 1.99KB </span>","children":null,"spread":false},{"title":"babel.config.js <span style='color:#111;'> 176B </span>","children":null,"spread":false},{"title":".husky","children":[{"title":".gitignore <span style='color:#111;'> 2B </span>","children":null,"spread":false},{"title":"pre-commit <span style='color:#111;'> 58B </span>","children":null,"spread":false}],"spread":true}],"spread":false}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明