📜  如何使最大高度容器颤动 (1)

📅  最后修改于: 2023-12-03 15:23:49.435000             🧑  作者: Mango

如何使最大高度容器颤动

需要注意的是,此方法不鼓励使用,因为会影响用户体验和导致容错性问题。此处只是介绍一种实现方式。

为了让最大高度容器颤动,我们可以通过以下步骤实现:

  1. 使用JavaScript获取容器元素的高度
let container = document.getElementById('container');
let height = container.offsetHeight;
  1. 设置容器元素的最大高度为当前高度
container.style.maxHeight = height + 'px';
  1. 循环减少容器元素的最大高度,直至达到一定的颤动效果
let minHeight = height - 10; //颤动高度
let toggle = false;
let intervalId = setInterval(() => {
  if (toggle) {
    container.style.maxHeight = height + 'px';
  } else {
    container.style.maxHeight = minHeight + 'px';
  }
  toggle = !toggle;
}, 50);
  1. 当不需要颤动时,清除interval
clearInterval(intervalId);

这样就可以让最大高度容器颤动了。

Markdown代码片段如下:

```javascript
let container = document.getElementById('container');
let height = container.offsetHeight;

container.style.maxHeight = height + 'px';

let minHeight = height - 10;
let toggle = false;
let intervalId = setInterval(() => {
  if (toggle) {
    container.style.maxHeight = height + 'px';
  } else {
    container.style.maxHeight = minHeight + 'px';
  }
  toggle = !toggle;
}, 50);

clearInterval(intervalId);