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

luqingxing

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

阅读量335

点赞数 7

文章标签：前端 css

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

本文链接：https://blog.csdn.net/luQingXing/article/details/134807721

版权

尝试了下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>