单击按钮时在React中对块进行动画处理

Question

我有一个按钮。当我按下它时，出现了一个方块，这是另一个方向。我不仅需要消失，还需要从max-height：100px到max-height：0px或类似的东西缓慢消失。我试图用CSS设置动画属性，但这没有帮助。

{
  props.additionalFilterbars &&
    <div className={s['filterbar-additional']}> 
        {withSelectFilter(attack, props.setAttack, 'Attack', null, null, <GiSwordWound />)}
        {withSelectFilter(health, props.setHealth, 'Health', null, null, <GiWaterDrop />)}
        {withSelectFilter(type, props.setCardType, 'Type', types, props.setTypeName)}
        {withSelectFilter(rarity, props.setRarity, 'Rarities', rarities, props.setRarityName)}
        {withSelectFilter(minionType, props.setMinionType, 'Minion Type', minionTypes, props.setMinionTypeName)}
        {withSelectFilter(keyword, props.setKeyword, 'Keywords', keywords, props.setKeywordName)}
    </div>
}

&-additional {
        // padding: 15px 0;
        display: flex;
        justify-content: center;
        animation: mymove 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards; 
        // & > * {
        //     animation: mymove 5s;
        // }
    }
    @keyframes mymove {
        from {
            height: 0px;
        }
        to {
            height: 70px;
            padding: 15px 0;
            border-top: 2px inset rgb(70, 0, 0);
        }
    }