javascript - 如何使用反应和样式组件制作手风琴菜单
问题描述
我正在尝试创建一个类似于 Bootstrap https://getbootstrap.com/docs/4.3/components/collapse/的手风琴菜单
我已经设法让它很好地打开和关闭,但我错过了平滑过渡:/
就像没有应用过渡一样。
import React, { useState } from 'react';
import styled from 'styled-components';
import { Button } from './common/button';
const AccordionWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--Secondary-color-dark);
border-radius: 10px;
height: auto;
padding: 2%;
text-align: center;
transition: all 0.6s ease-in-out;
`;
const InternalWrapper = styled.div`
width: 100%;
max-height: ${(props) => (props.open ? '100%' : '0')};
transition: all 1s ease-in-out;
overflow: hidden;
`;
const Accordion = ({ title, subTitle, btnText }) => {
const [ open, setOpen ] = useState(false);
const handleClick = () => {
setOpen(!open);
};
return (
<AccordionWrapper>
<h2>{title}</h2>
<h3>{subTitle}</h3>
<InternalWrapper open={open}>
<h1>Hello</h1>
</InternalWrapper>
<Button padding="5px" onClick={handleClick}>
{btnText}
</Button>
</AccordionWrapper>
);
};
Accordion.defaultProps = {
title : 'title',
subTitle : 'subtitle',
btnText : 'Read more >>'
};
export default Accordion;
这是一个codepen复制品。 https://codepen.io/hichihachi/pen/MWwKZEO?editors=0010
任何帮助将不胜感激,谢谢。
解决方案
当您以百分比和其他一些单位设置时,最大高度过渡不起作用。为了使过渡工作,您可以定义类似
max-height: ${(props) => (props.open ? '100px' : '0')};
https://codepen.io/alonabas/pen/PoqNYLR?editors=1111
但是如果您的内容高度超过 100 像素,当您打开 Accordion 时,内容将被剪切。在这种情况下,您可以使用 jQuery 来计算内容的确切大小或使用 max-height 的某个最大可能值。
这两个选项都在这里描述: https ://stackoverflow.com/a/8331169/2916925
推荐阅读
- ios - AVPlayerItemDidPlayToEndTime 与 applicationDidBecomeActive 冲突
- c++ - 将数据从类的一个字段发送回类
- python - Await queue.get 卡在一个空队列上
- mongodb - 如何正确设计MongoDB集合关系
- python - 使用 QDateTimeAxis x 轴时如何向 QChart 添加点
- python - 如何使用 Pango 和 (py)Cairo 激活亚像素定位?
- bash - 如何在 Gitlab 中添加服务器端自定义 Hooks?
- c++ - C++ 从函数返回一个局部变量作为参考
- mongodb - 如何将数据从一个集合传输到另一个集合
- javascript - 使用确切路径反应路由器嵌套路由