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 
}