我不知道为什么我的过渡仅在一个方向上起作用,而更好地理解了gif,我希望它在完成的任务出现和消失时都可以双向工作,感谢阅读。
TaskItem组件;
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, { 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
如果需要完整的代码:
--- IGNORE-- 您的帖子似乎大部分是代码;请添加更多详细信息。
使用过渡时,如果声明多个属性,则需要将过渡时间(以及所需的任何其他道具)设置为每个。您编写的方式仅opacity
设置了过渡持续时间。您还需要添加到最大高度:
transition: max-height 1s, opacity 1s;
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句