Seeking help with a React component that should toggle visibility when the wrapping parent div is clicked. I want to include animations for both appearing and disappearing, but currently only the appearance animation is working. Can anyone spot what I'm doing wrong? Thanks!
React component
import React from 'react';
import classNames from 'classnames/bind';
import styles from './styles.css';
const cx = classNames.bind(styles);
export default function toggleableElement({ isOpen, content }) {
const animatedAnswerStyle = cx({
animatedAnswer: true,
opened: isOpen,
closed: !isOpen,
});
return (
<div className={animatedAnswerStyle}>
{
isOpen &&
<p> { content } </p>
}
</div>
);
}
Style
.animatedAnswer {
transform: scaleY(0);
}
.opened {
transform: scaleY(1);
tranform-origin: top;
transition: transform 2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.closed {
transform: scaleY(0);
tranform-origin: top;
transition: transform 2s cubic-bezier(0.4, 0.0, 0.2, 1);
}