After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions.
An example can be found here:
The prevailing notion always revolves around:
...the optimization of transition experience should involve preventing any repaint caused by animated CSS.
INQUIRY
I am looking to achieve something similar to the code snippet below where filters boxes expand/collapse upon user interaction. Currently, I am only able to utilize the transition of the height property. Is there an alternative method to accomplish this without transitioning the height property as demonstrated?
Note: This pertains to a mobile view where I aim for the "Filters" section to smoothly push down the "Results" when expanded. The "Results" will include a gallery featuring 30 products with thumbnails, titles, and links.
const styled = window.styled;
const Header_DIV = styled.div`
position: fixed;
top: 0; left: 0;
width: 100%;
height: 50px;
background-color: lightblue;
`;
const Main_DIV = styled.div`
padding-top: 42px;
`;
const Filters1_DIV = styled.div`
width: 100%;
background-color: lightgreen;
cursor: pointer;
height: ${props => props.open ? '100px' : '16px' };
transition: height ease-out .5s;
`;
const Filters2_DIV = styled.div`
width: 100%;
background-color: lightcoral;
cursor: pointer;
height: ${props => props.open ? '100px' : '16px' };
transition: height ease-out .5s;
`;
const Results_DIV = styled.div`
background-color: lightgray;
`;
function App() {
const [openFilter1,setOpenFilter1] = React.useState(false);
const [openFilter2,setOpenFilter2] = React.useState(false);
function toggleFilter1() {
setOpenFilter1(prevState => !prevState);
}
function toggleFilter2() {
setOpenFilter2(prevState => !prevState);
}
return(
<React.Fragment>
<Header_DIV>
Header
</Header_DIV>
<Main_DIV>
<Filters1_DIV
onClick={toggleFilter1}
open={openFilter1}
>
Filter1 ----------- Click to open/close!
</Filters1_DIV>
<Filters2_DIV
onClick={toggleFilter2}
open={openFilter2}
>
Filter2 ----------- Click to open/close!
</Filters2_DIV>
<Results_DIV>
Results
</Results_DIV>
</Main_DIV>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));* {
box-sizing: border-box;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root"/>