我希望具有与 jQuery slidedown 类似的效果,但 不 使用 jQuery 或任何其他库。我知道这是“可能的”,因为 jQuery 中的任何内容都可以用纯 JavaScript 完成。只是更难。
我不能使用 jQuery,因为所有内容都必须在不使用任何库的情况下用我自己的代码编写。
有没有人只使用纯 JavaScript 做过这样的事情或任何效果?
原文由 Elliott 发布,翻译遵循 CC BY-SA 4.0 许可协议
我希望具有与 jQuery slidedown 类似的效果,但 不 使用 jQuery 或任何其他库。我知道这是“可能的”,因为 jQuery 中的任何内容都可以用纯 JavaScript 完成。只是更难。
我不能使用 jQuery,因为所有内容都必须在不使用任何库的情况下用我自己的代码编写。
有没有人只使用纯 JavaScript 做过这样的事情或任何效果?
原文由 Elliott 发布,翻译遵循 CC BY-SA 4.0 许可协议
既然已经是 2014 年了,为什么不使用 CSS transitions 而只是改变元素的 height 属性呢? 小提琴
CSS:
.wrapper {
transition:height 1s ease-out;
height:0;
overflow:hidden;
}
HTML:
<div id="wrapper">
//content
</div>
脚本:
document.getElementById("wrapper").style.height = //content height +"px";
所以我们在 2020 年,现在更明显的是我们应该依赖 CSS 效果来制作这种动画。
但是,针对此答案提出了一个有效的观点 - 您需要在 js 代码中指定要设置动画的元素的高度,并且您可能事先不知道该值。
所以六年后,我添加了几行额外的代码来解决这个问题。
因此,如果我们使用与 2014 年旧示例中相同的 CSS 和 HTML,这就是新的 JS。 新小提琴!
const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;
slideDown(document.getElementById("wrapper"));
原文由 Ruben Serrate 发布,翻译遵循 CC BY-SA 4.0 许可协议
13 回答13k 阅读
7 回答2.2k 阅读
3 回答1.3k 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
6 回答1.1k 阅读
这是我从头开始编写的一段不错的代码。
它纯粹是 基于时间的。
在这里测试:http: //jsbin.com/azewi5/5