height:auto 时 transition动画失效

场景

点击收起时ul-wrapper高度设置为100px,展开时高度设置为auto,同时设置展开,收起的动画transition: all 3s; 但是动画不生效

const App = () => {
  const [expand, setExpand] = useState(false);
  return (
    <div>
      <div onClick={() => setExpand(!expand)}>{expand ? '收起' : '展开'}</div>
      <ul className="ul-wrapper" style={{ height: expand ? 'auto' : '100px' }}>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
        <li>数据啦啦啦...</li>
      </ul>
    </div>
  );
};
.ul-wrapper {
  margin-top: 20px;
  height: 100px;
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
  transition: all 3s;

  li {
    height: 50px;
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaISxmw7-1681308234424)(/Users/tangmengxia/Library/Application Support/typora-user-images/image-20230411233548534.png)]

解决

必须设置height为一个具体值时transition动画才会生效,但是ul-wrapper中的数据需要动态渲染,并不知道展开后的准确高度!通过套一个父盒子,并在父盒子上设置max-height来实现transition动画,展开后的高度通过js动态获取

  1. 子盒子ul-wrapper不设置高度,动态撑开
  2. 父盒子ul-wrapper-parent的max-height根据expand值动态设置,超出部分隐藏 overflow: hidden; 同时设置transition动画

此时,由于ul-wrapper-parent展开,收起时的max-height都是具体值,展开动画生效

const Block = () => {
  const [expand, setExpand] = useState(false);

  useEffect(() => {
    const parent = document.getElementById('parent');
    const child = document.getElementById('child');
    if (!parent) return;
    if (expand && child) {
      parent.style.maxHeight = child.getBoundingClientRect().height + 'px';
    } else {
      parent.style.maxHeight = '100px';
    }
  }, [expand]);
  return (
    <div>
      <div onClick={() => setExpand(!expand)}>{expand ? '收起' : '展开'}</div>
      <div className="ul-wrapper-parent" id="parent">
        <ul className="ul-wrapper" id="child">
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
          <li>数据啦啦啦...</li>
        </ul>
      </div>
    </div>
  );
};
.ul-wrapper-parent {
  max-height: 100px;
  overflow: hidden;
  transition: all 3s;
  margin-top: 20px;
  width: 200px;
  overflow: hidden;
  border: 1px solid red;

  .ul-wrapper {
    li {
      height: 50px;
    }
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值