滑动盒子
wenking 9/22/2024 样式效果
# 效果
# 重点
问题：
- 向下滑动盒子时我们是不知道盒子内容高度，但设置过度动画我们需要确定盒子高度：如果设置固定高度，内容过多会撑爆盒子，内容过少则会出现大量空白；因此此处我们不能设置盒子高度；
设计思路：
- 初始时向下滑动盒子的高度为0，并且需要隐藏盒子内容，滑动盒子的内容可以自行设计。
- 触发动画时，我们可以先设置高度为自动，滑动盒子（父盒子）会自动设置高度为其所有子盒子的总高度，然后通过拿到父盒子元素，读取其高度（getBoundingClientRect），并再下一帧（requestAnimationFrame）设置高度触发动画
此处使用了Flip动画设计思想：
- First（F）：记录元素初始位置
- Last（L）：记录元素动画运行结束时候的位置
- Invert（I）：设置过度效果
- Play（P）：触发动画
# 代码
# js
function onSelectBtn1() {
const slide = document.querySelector('.slide1')
slide.style.height = 'auto'
const {height} = slide.getBoundingClientRect()
slide.style.height = '0'
requestAnimationFrame(() => {
slide.style.height = height + 'px'
})
}
function onUnselectBtn1() {
const slide = document.querySelector('.slide1')
slide.style.height = '0'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# html
<div class="slide1">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias, cum cumque, dolorum eveniet,
exercitationem expedita facilis fugit id impedit nisi reiciendis sapiente sed sit tempore voluptate voluptates
voluptatibus. Aliquid, aperiam atque autem beatae deserunt dolores eligendi ex facilis, ipsam magni quae
quisquam recusandae sed sit, soluta! Architecto consectetur debitis deserunt dignissimos facere illum, iure
labore modi nemo nostrum obcaecati quaerat ullam voluptatum? A ab animi asperiores assumenda consequuntur
dignissimos distinctio eos fugiat in, ipsam nam natus nisi numquam obcaecati odio praesentium quas quo rem
repellendus reprehenderit soluta suscipit tempore unde veritatis voluptates. Animi corporis dignissimos ea, iste
nobis tempora?
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# css
.slide1
width 500px
height 0
overflow hidden
transition 1s
.content
padding 10px
font-size 20px
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9