我正在研究最初包含 1 張卡片的反應功能組件，如下所示：
當我填寫欄位并按 Enter 鍵時，我想將其設定為向左影片并使其更小并創建另一個像圖片一樣的內容：
最后，當我在左側有一個框，在中間有另一個框時，我再次填充資料并按回車鍵，我想用影片隱藏左側的小框，并通過調整大小為左側填充影片，并從右側添加新專案以 0px 寬度和高度開始的影片在移動到中心時會變大，如下所示：
我總是在中心看到新的盒子，如果我注冊了任何記錄，我有一個以前的盒子，尺寸較小。影片很重要
我想要的只是旋轉木馬之類的東西。我花了很多時間，但沒有得到結果。
我需要 CSS 英雄幫助我擺脫困境。
謝謝大家
uj5u.com熱心網友回復：
經過4天的努力，終于搞定了。我為有相同要求的人回答了我的問題。
import { Typography, TextField, Box } from "@mui/material"
import { useEffect, useRef, useState } from 'react';
import Layout from '../layout'
import styles from './serial.module.css';
const Serial = () => {
const [state, setState] = useState({
items: [
{
serial: '',
activity: ''
},
],
newItem: {
serialRegistered: false,
serial: '',
activity: ''
}
})
const serialInputRef = useRef();
const activityInputRef = useRef();
useEffect(() => {
if (serialInputRef.current, activityInputRef.current) {
if (state.newItem.serialRegistered === false) {
serialInputRef.current.focus();
}
else {
activityInputRef.current.focus();
}
}
}, [state])
return (
<Layout>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'row', direction: 'ltr' }}>
{
state.items.map((item, index) => {
console.log(state.items);
if (index === state.items.length - 1 && state.items.length > 1) { // new
return (
<div className={styles.i1}>
<Typography>
{item.serial}
</Typography>
<br />
<Typography>
{item.activity}
</Typography>
</div>
)
}
else if (index === state.items.length - 2 || state.items.length === 1) { // current
return (
<div className={styles.i2}>
<Box style={{ width: '100%', margin: 'auto' }} component="form" noValidate onSubmit={e => { e.preventDefault(); }}>
<TextField
inputRef={serialInputRef}
label="?????"
placeholder='?????'
value={state.newItem.serial}
margin="normal"
disabled={state.newItem.serialRegistered}
required fullWidth focused autoFocus
autoComplete=""
onKeyPress={(e) => {
if (e.code === 'Enter') {
setState(prev => {
return {
...prev,
newItem: {
...prev.newItem,
serialRegistered: true,
}
}
})
} else {
setState(prev => {
return {
...prev,
newItem: {
...prev.newItem,
serial: prev.newItem.serial e.key,
}
}
})
}
}}
onBlur={(e) => {
if (state.newItem.serialRegistered === false) {
e.target.focus()
}
}} />
</Box>
<Box style={{ width: '100%', margin: 'auto' }} component="form" noValidate onSubmit={e => { e.preventDefault(); }}>
<TextField
inputRef={activityInputRef}
label="??????"
placeholder='??????'
margin="normal"
value={state.newItem.activity}
required fullWidth focused autoFocus
autoComplete={false}
onKeyPress={(e) => {
if (e.code === 'Enter') {
setState(prev => {
console.log("prev", prev)
console.log("prev 1", prev.items.slice(0, prev.items.length - 1));
console.log("prev 1", prev.items.slice(0, prev.items.length - 2));
return {
...prev,
items: [...prev.items.slice(0, prev.items.length - 1), prev.newItem, {
serial: '',
activity: ''
}],
newItem: {
serialRegistered: false,
serial: '',
activity: ''
},
}
})
} else {
setState(prev => {
return {
...prev,
newItem: {
...prev.newItem,
activity: prev.newItem.activity e.key,
}
}
})
}
}}
onBlur={(e) => {
if (state.newItem.serialRegistered === true) {
e.target.focus()
}
}} />
</Box>
</div>
)
}
else if (index === state.items.length - 3) { // previous
return (
<div className={styles.i3}>
<Box style={{ width: '100%', margin: 'auto' }} component="form" noValidate onSubmit={e => { e.preventDefault(); }}>
<TextField
size="small"
label="?????"
placeholder='?????'
value={item.serial}
margin="normal"
disabled
fullWidth focused autoFocus
autoComplete="" />
</Box>
<Box style={{ width: '100%', margin: 'auto' }} component="form" noValidate onSubmit={e => { e.preventDefault(); }}>
<TextField
size="small"
label="??????"
placeholder='??????'
margin="normal"
value={item.activity}
disabled
fullWidth focused autoFocus
autoComplete={false} />
</Box>
</div>
)
}
else if (index === state.items.length - 4) { // 2 previous
return (
<div className={styles.i4}>
<Box style={{ width: '100%', margin: 'auto' }} component="form" noValidate onSubmit={e => { e.preventDefault(); }}>
<TextField
className={styles.i4Content}
size="small"
label="?????"
placeholder='?????'
value={item.serial}
margin="normal"
disabled
required fullWidth focused autoFocus
autoComplete="" />
</Box>
<Box style={{ width: '100%', margin: 'auto' }} component="form" noValidate onSubmit={e => { e.preventDefault(); }}>
<TextField
className={styles.i4Content}
size="small"
label="??????"
placeholder='??????'
margin="normal"
value={item.activity}
required fullWidth focused autoFocus
autoComplete={false} />
</Box>
</div>
)
}
else {
return (<></>)
}
})
}
</div>
</Layout>
)
}
export default Serial.i1 {
/* new */
display: none;
}
.i2 {
/* current */
position: relative;
padding: 20px;
width: 350px;
height: 210px;
background-color: white;
border: 1px solid #bdb6b6;
border-radius: 10px;
margin: 30px;
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
animation-name: i2kf;
-webkit-animation-name: i2kf;
animation-duration: 2s;
-webkit-animation-duration: 2s;
}
@keyframes i2kf {
from {
opacity: .6;
transform: scale(.1);
right: -350px;
width: 350px;
height: 210px;
}
to {
opacity: 1;
transform: scale(1);
right: 0px;
width: 350px;
height: 210px;
}
}
.i3 {
/* prev */
position: relative;
padding: 20px;
width: 230px;
height: 130px;
/* transform: scale(.5); */
background-color: white;
border: 1px solid #bdb6b6;
border-radius: 10px;
margin: 30px;
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
animation-name: i3kf;
-webkit-animation-name: i3kf;
animation-duration: 2s;
-webkit-animation-duration: 2s;
/* animation-delay: .2ms;
-webkit-animation-delay: .2s; */
}
@keyframes i3kf {
from {
right: -400px;
width: 350px;
height: 210px;
/* transform: scale(.1); */
}
to {
right: 0px;
width: 230px;
height: 130px;
}
}
.i4 {
/* prev */
position: relative;
padding: 20px;
background-color: white;
border: 1px solid #bdb6b6;
border-radius: 10px;
margin: 30px;
width: 0px;
height: 0px;
/* display: none; */
opacity: 0;
animation-name: i4kf;
-webkit-animation-name: i4kf;
animation-duration: 3s;
-webkit-animation-duration: 3s;
/* animation-delay: .1ms;
-webkit-animation-delay: .1s; */
}
@keyframes i4kf {
from {
transform: scale(.9);
right: -260px;
width: 240px;
height: 150px;
opacity: 1;
}
to {
/* transform: scale(0); */
right: 0px;
width: 0px;
height: 0px;
opacity: 0;
}
}
.i4Content {
opacity: 0;
animation-name: i4kfContent;
-webkit-animation-name: i4kfContent;
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
@keyframes i4kfContent {
from {
opacity: .5;
}
to {
opacity: 0;
}
}這是我的第一個代碼片段，我無法解決錯誤。我有一些依賴，比如 material-ui 和其他一些組件。
如果您洗掉 Layout 并添加依賴關系，它可以正常作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/493208.html
上一篇：來自預制件的物件影片存在問題
下一篇：反應原生-停止影片