ScaleY转换不起作用

Question

我有一个反应组件，当单击包装它的父级div时，我想显示或隐藏它。 我想为它们出现时和消失时添加动画。

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

阵营组件

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 
}