平滑显示/隐藏元素的 JavaScript 库

标签 javascript css show-hide

<分区>

我需要动画显示和隐藏 div 元素。是否有任何 JS 库或 CSS 技巧可以实现?我知道 jQuery 和类似的东西,但它们太大了 - 我不想使用超过 ~5 KB。

我也试过 CSS transition,但它不允许使用 display 属性。可见性在页面中占据一席之地,这是不可取的。


编辑: 例如: jQuery.toggle() . 从上数第二个 Demo。

最佳答案

使用 CSS 过渡。您无需触摸显示属性。

您可以将 div 的高度/宽度(或两者)设置为 0,然后设置为您想要的大小,然后激活过渡。

或者,如果您为 div 的位置设置动画,则可以从页面飞入/飞出 div(从页面外部开始飞入所需位置,反之亦然)。您可以将它们从顶部或从左/右滑入。

关于平滑显示/隐藏元素的 JavaScript 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13893505/

相关文章:

javascript - 使用canvas2image将FLOT图表保存到图像文件

javascript - 侧边栏中的事件列表

html - 表格可以做什么 CSS 定位不能做什么?

javascript - 单击项目看板打开任务,想要更改它 - odoo

javascript - 初始化可观察数组时传递的参数必须是数组,或者为 null,或者为 undefined

css - 通过单击其他链接隐藏 CSS 页面

jquery - 如何显示或隐藏带有多个复选框的多个 div

javascript - <ul> <li> 仅隐藏/显示内部文本而不是 <i> 图标标签

javascript - Ionic 2/Angular 2 中的 Promises,怎么样?

html - Float 2 div 和背景图片