react中通过css进行一行四个每点击一次就向右平移一次的动画效果

最新推荐文章于 2025-05-08 11:20:32 发布

原创最新推荐文章于 2025-05-08 11:20:32 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

本文介绍了如何在React应用中使用useState和CSS样式实现一个可平移的教师列表，包括左右按钮控制列表项的移动，以及列表项的显示与隐藏。点击事件触发导航到详细页面。

当前的数组设置为

const [teacherList, setTeacherList] = useState([]);

点击几次的记录

const [transNum, setTransNum] = useState(0);

向右-1 向左+1

向左向右的两边的按钮按照自己要求设置css，并且到头时按钮隐藏

按钮代码👇

           {teacherList.length > 4 && transNum !== 4 - teacherList.length && (
              <div
                className={styles.bottonRight}
                onClick={() => {
                  if (transNum > 4 - teacherList?.length) {
                    console.log(transNum, gridRef, 'transNum');
                    setTransNum(transNum - 1);
                  }
                }}
              >
                {'>'}
              </div>
            )}
            {teacherList.length > 4 && transNum !== 0 && (
              <div
                className={styles.bottonLeft}
                onClick={() => {
                  if (transNum < 0) {
                    setTransNum(transNum + 1);
                  }
                }}
              >
                {'<'}
              </div>
            )}

平移关键代码，由于每个div间隔为20 所以每次平移为（当前div宽度/4+5）*点击num,挂载当前div获取相关宽度

const gridRef = useRef();

 <div className={styles.grid2Out}>
              <div
                className={styles.grid2}
                ref={gridRef}
                style={{
                  transform: `translateX(${
                    (gridRef?.current?.offsetWidth / 4 + 5) * transNum
                  }px)`,
                  transition: 'all 1s',
                }}
              >
                {teacherList?.map((item, index) => {
                  return (
                    <div
                      key={index}
                      className={styles.teacherListInBox}
                      onClick={() => {
                        navigate('/user/teacherAndLesson', {
                          state: {
                            index: index,
                            id: item?.id,
                          },
                        });
                      }}
                    >
                      <div style={{ height: 182, borderRadius:'10px 10px 0 0',overflow:'hidden'}} className={styles.backImg}>
                        {item.avatar_obj?.[0]?.url ? (
                          <img
                            src={item.avatar_obj?.[0]?.url}
                            alt=""
                            style={{
                              borderRadius: '10px 10px 0 0',
                              width: '100%',
                              height: '100%',
                            }}
                          />
                        ) : (
                          <div
                            style={{
                              backgroundColor: '#f0edf2',
                              width: '100%',
                              height: '100%',
                              borderRadius: 10,
                            }}
                          >
                            <RobotOutlined
                              style={{
                                width: '100%',
                                height: '100%',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                              }}
                            />
                          </div>
                        )}
                        {/* <img
                        src={item.avatar_obj?.[0]?.url}
                        alt=""
                        style={{
                          borderRadius: '10px 10px 0 0',
                          width: '100%',
                          height: '100%',
                        }}
                      /> */}
                      </div>
                      <div style={{ padding: 15 }}>
                        <div  className={styles.horverTitle} style={{ marginBottom: 
                             15 }}>{item.name}</div>
                        <div style={{ fontSize: 12, color: '#aaa' }}>
                          {item.position}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

css文件👇

.grid2Out{
    overflow: hidden;
}
.grid2{
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    // overflow:hidden;
    .teacherListInBox{
        img{
            transform: scale(1);
            transition: all 1s,
          }
    cursor: pointer;
      flex: 1;
      height: 260px;
      box-shadow: 0 10px 20px rgba(0,0,0,.02);
      margin: 20px 20px 20px 0;
      box-sizing: border-box;
    //   border: 1px solid #e3e0e0;
      border-radius: 10px;
      width: calc((100% - 60px) / 4);
      min-width: calc((100% - 60px) / 4);
      max-width: calc((100% - 60px) / 4);
    //   &:nth-child(4n + 4) {
    //     margin-right: 0;
    //   }  
    }
    .horverTitle{
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
   .teacherListInBox:hover{
    box-shadow: 0 10px 20px rgba(1, 1,1, 0.05);
    img{
      transform: scale(1.1);
      transition: all 1s,
    }
    .horverTitle{
        color:#1677ff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
   }
}
.bottonRight{
    position: absolute;
    right: -40px;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid  #aaaaaa42;
    box-shadow: #aaa;
    cursor: pointer;
}
.bottonLeft{
    position: absolute;
    left: -40px;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid  #aaaaaa42;
    cursor: pointer;

}