ScaleY转换不起作用

Question

当我点击包装它的父div时，我想要显示或隐藏的react组件。 我试图在它出现时和它消失时添加动画。

目前它只在出现时起作用，我做错了什么？ 感谢

反应组件

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>
    );
}

风格

.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);    
}

Answer 1

这很有用。

.animatedAnswer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.opened {
  max-height: 800px; // a big value
}