Javascript 过渡只能在一个方向上工作

我不知道为什么我的转换只在一个方向上工作，使用gif它更容易理解，我希望它在完成的任务出现和消失时双向工作，谢谢阅读

组件任务项：

import React, { memo } from 'react'
import styled from "styled-components"

//STYLES

const DIV = styled.div`
    max-height: ${
        props => !props.show && props.done ? "0px" : "150px"
    };
    
    opacity: ${
        props => !props.show && props.done ? "0": "1"
    };

    padding: ${
        props => !props.show && props.done ? "0px":"12px 15px"
    };

    overflow: hidden;
    transition: max-height, opacity 1s;
`;

const TR = styled.tr`
    :nth-child(even) {background-color: #f3f3f3;}
    border-bottom: ${
        props => !props.show && props.done ? "none": "1px solid #dddddd"
    };;
`;

const TD = styled.td`
    /* padding: ${props => {
        if (props.show && props.done) {
            return "12px 15px"
        }
        else if (!props.show && props.done) {
            return "0"
        }

        return "12px 15px"
    }}; */
    /* overflow: hidden;
    transition: all 0.3s; */
`;

function TaskRow({ task, toggleDoneTask, show }) {

    return (
        <TR show={show} done={task.done}>
            <TD>
                <DIV show={show} done={task.done}>
                    {task.title}
                </DIV>
            </TD>
            <TD>
                <DIV show={show} done={task.done}>
                    {task.description}
                </DIV>
            </TD>
            <TD>
                <DIV show={show} done={task.done}>
                    <input type="checkbox"
                        checked={task.done}
                        onChange={toggleDoneTask}
                    />
                </DIV>
            </TD>
        </TR>

    )

}


export default memo(TaskRow, (prev, next) => {

    //COMPARE TASK OBJECT

    const prevTaskKeys = Object.keys(prev.task);
    const nextTaskKeys = Object.keys(next.task);

    const sameLength = prevTaskKeys.length === nextTaskKeys.length;
    const sameEntries = prevTaskKeys.every(key => {
        return nextTaskKeys.includes(key) && prev.task[key] === next.task[key];
    });

    //COMPARE PROP SHOW, CHECK IF SHOW CONTROL CHANGE
    const sameShow = prev.show === next.show

    return sameLength && sameEntries && sameShow;
})

import React，{memo}来自“React”
从“样式化组件”导入样式化
//风格
const DIV=styled.DIV`
最大高度：${
props=>！props.show&&props.done？“0px”：“150px”
};
不透明度：${
props=>！props.show&&props.done？“0”：“1”
};
填充：${
props=>！props.show&&props.done？“0px”：“12px 15px”
};
溢出：隐藏；
过渡：最大高度，不透明度1s；
`;
const TR=styled.TR`
：n子级（偶数）{背景色：#f3；}
边框底部：${
props=>！props.show&&props.done？“无”：“1px固体#dddddd”
};;
`;
const TD=styled.TD`
/*填充：${props=>{
if（props.show&&props.done）{
返回“12px 15px”
}
否则，如果（！props.show&&props.done）{
返回“0”
}
返回“12px 15px”
}}; */
/*溢出：隐藏；
过渡：均为0.3秒*/
`;
函数TaskRow（{task，toggleDoneTask，show}）{
返回(
{task.title}
{task.description}
)
}
导出默认备忘（任务行，（上一个，下一个）=>{
//比较任务对象
const prevTaskKeys=Object.keys（prev.task）；
const nextTaskKeys=Object.keys（next.task）；
const sameLength=prevTaskKeys.length==nextTaskKeys.length；
const sameEntries=prevTaskKeys.every（key=>{
返回nextTaskKeys.includes（key）和&prev.task[key]==next.task[key]；
});
//比较道具显示，检查显示控制是否改变
const sameShow=prev.show==next.show
返回sameLength&&sameEntries&&sameShow；
})

组件任务：

import React, { useEffect, useReducer } from 'react'
import TaskItem from "./TaskItem";

function saveLocalStorage(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks))
}

function TasksReducer(taskItems, { type, task }) {
    switch (type) {
        case 'UPDATE_TAKS': {
            let taskItemsCopy = [...taskItems].map((task) => ({ ...task }))
            let newItems = taskItemsCopy.map((t) => {
                if (t.id === task.id) {
                    t.done = !t.done
                };
                return t;
            })
            saveLocalStorage(newItems)
            return newItems
        }

        case 'ADD_TASK': {
            const newItems = [...taskItems, task]
            saveLocalStorage(newItems)
            return newItems
        }

        default:
            window.alert('INVALID ACTION')
            break;
    }
}

const initialState = JSON.parse(localStorage.getItem('tasks')) || []

//STYLES

const styleTable = {
    'borderCollapse': 'collapse',
    'margin': '25px 0',
    'fontSize': '0.9em',
    'fontFamily': 'sans-serif',
    'minWidth': '400px',
    'boxShadow': '0 0 20px rgba(0, 0, 0, 0.15)'
}

const styleTr = {
    'backgroundColor': '#009879',
    'color': '#ffffff',
    'textAlign': 'left'
}

const styleTh = {
    padding: '12px 15px'
}

function Tasks({ newTask, show }) {
    const [taskItems, dispatch] = useReducer(TasksReducer, initialState);

    useEffect(() => {
        if (!newTask) return
        newTaskHandler({ id: taskItems.length + 1, ...newTask })
    }, [newTask])

    const newTaskHandler = (task) => {
        dispatch({ type: 'ADD_TASK', task })
    }

    const toggleDoneTask = (task) => {
        dispatch({ type: 'UPDATE_TAKS', task })
    }

    return (
        <React.Fragment>
            <h1>learning react </h1>
            <table style={styleTable}>
                <thead>
                    <tr style={styleTr}>
                        <th style={styleTh}>Title</th>
                        <th style={styleTh}>Description</th>
                        <th style={styleTh}>Done</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        taskItems.map((task) => {
                            return <TaskItem
                                        task={task}
                                        key={task.id}
                                        show={show}
                                        toggleDoneTask={() => toggleDoneTask(task)}>
                                    </TaskItem>
                                
                        })
                    }
                </tbody>
            </table>
        </React.Fragment>
    )
}


export default Tasks

import React，{useffect，useReducer}来自“React”
从“/TaskItem”导入TaskItem；
函数saveLocalStorage（任务）{
localStorage.setItem（'tasks'，JSON.stringify（tasks））
}
函数TasksReducer（任务项，{type，task}）{
开关（类型）{
“更新”案例：{
让TaskItemScope=[…taskItems].map（（任务）=>（{…任务}））
让newItems=taskItemScope.map（（t）=>{
if（t.id==task.id）{
t、 完成=！t.done
};
返回t；
})
saveLocalStorage（新项目）
返回新项目
}
案例“添加任务”：{
const newItems=[…任务项，任务]
saveLocalStorage（新项目）
返回新项目
}
违约：
window.alert（'无效操作'）
打破
}
}
const initialState=JSON.parse（localStorage.getItem（'tasks'））| |[]
//风格
常量样式表={
“边界塌陷”：“塌陷”，
“边距”：“25px 0”，
“fontSize”：“0.9em”，
“fontFamily”：“无衬线”，
“最小宽度”：“400px”，
“boxShadow”：“0 0 20px rgba（0,0,0,0.15）”
}
常量styleTr={
“背景色”：“009879”，
“颜色”：“ffffff”，
“文本对齐”：“左”
}
常量styleTh={
填充：“12px 15px”
}
函数任务（{newTask，show}）{
const[taskItems，dispatch]=useReducer（TasksReducer，initialState）；
useffect（（）=>{
如果（！newTask）返回
newTaskHandler（{id:taskItems.length+1，…newTask}）
}，[newTask]）
常量newTaskHandler=（任务）=>{
分派（{type:'ADD_TASK'，TASK}）
}
const toggleDoneTask=（任务）=>{
分派（{type:'UPDATE_TAKS'，task}）
}
返回(
学习反应
标题
描述
多恩
{
taskItems.map（（任务）=>{
返回toggleDoneTask（任务）}>
})
}
)
}
导出默认任务

如果需要完整的代码：

——忽略--

---

看起来你的帖子大部分都是代码；请添加更多详细信息。

使用转换时，如果您为多个属性声明，则需要为每个属性设置转换持续时间（以及您想要的任何其他道具）。您仅编写<代码>不透明度的方式设置了转换持续时间。您还需要添加到“最大高度”：

transition: max-height 1s, opacity 1s;