不固定高度的手风琴动画效果（需使用js计算盒子大小，transform: translateY()方法解决）

luqingxing

已于 2023-12-06 09:55:22 修改

阅读量408

点赞数 7

CC 4.0 BY-SA版权

文章标签：前端 css

于 2023-12-05 15:08:38 首次发布

本文链接：https://blog.youkuaiyun.com/luQingXing/article/details/134807721

文章讨论了使用`max-height`方案遇到的问题，以及如何通过`transform:translateY()`实现元素高度的动态变化。作者求助于一个代码实例，展示了如何在`isOpen`状态切换时控制`box`的高度，尽管存在高度溢出问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尝试了下max-height方案，没搞明白。有大佬可以指个代码链接给我吗？

省流：transform: translateY()

使用场景及其有限，因为box高度在-100%的情况下还是会占位置！！！！

<template>
	<div class="box" :class="isOpen ? 'open' : 'close'"  style="height: 200px;"></div>
</template>
<style scoped>
.box{
	transform: translateY(-100%);
}
.open{
	animation: closeToOpen 0.5s;
	animation-fill-mode: forwards;
}
.close{
	animation: openToClose 0.5s;
	animation-fill-mode: forwards;
}
@keyframes closeToOpen
{
    0%   {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}
@keyframes openToClose
{
    0%   {transform: translateY(0);}
    100% {transform: translateY(-100%);}
}
</style>