盒子显示隐藏时高度变化的动画效果怎么写
时间: 2023-10-05 19:11:23 浏览: 175
可以用 CSS 的过渡效果(transition)来实现盒子高度变化的动画效果。具体步骤如下:
1. 设置盒子的初始高度和最终高度,可以使用 `height` 属性;
2. 设置盒子的过渡时间和过渡效果,可以使用 `transition` 属性;
3. 在需要触发高度变化的事件中,动态改变盒子的高度,比如使用 JavaScript 中的 `classList.toggle` 方法来切换盒子的显示/隐藏状态。
以下是一个示例代码:
HTML:
```html
<div class="box">
<p>这是一个盒子</p>
</div>
<button onclick="toggleBox()">显示/隐藏盒子</button>
```
CSS:
```css
.box {
height: 100px; /* 初始高度 */
transition: height 0.3s ease-in-out; /* 过渡效果和时间 */
overflow: hidden; /* 隐藏超出盒子高度的内容 */
}
```
JavaScript:
```js
function toggleBox() {
var box = document.querySelector('.box');
box.classList.toggle('hidden');
}
```
在 CSS 中定义了过渡效果后,在 JavaScript 中切换 `.hidden` 类名时,盒子高度会自动过渡到目标高度,从而实现动画效果。`.hidden` 类名可以通过设置 `height: 0;` 来隐藏盒子。
阅读全文