使用CSS创建ReactJ组件，例如轮播

Question

我正在研究最初包含1张卡的React功能组件：

当我填充字段并击中Enter时，我想对其进行动画效果，并使其较小并创建另一个像图片一样：

最后，当我在左侧有一个盒子，另一张盒子在中间，我再次填充数据并击中Enter，我想将小盒子隐藏在左边通过调整大小并从右侧添加新项目的动画从0px宽度开始，而高度则更大，而在迁移到中心的同时如下：

总是看到中心的新框，如果我注册了任何记录，我的尺寸较小。 动画很重要，

我想要的就是像轮播一样的东西。我花了很多时间，但没有得到结果。

我需要CSS英雄帮助我摆脱困境。

感谢所有

Answer 1

经过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;
  }
}

这是我的第一个代码段，我无法解决错误。我有一些依赖性材料 - UI和其他一些组件。

如果删除布局并添加依赖，则可以正常工作。