Question

我有一个SideBar组件，它始终在根组件App中呈现。我用Redux存储抽屉的状态，并根据抽屉的状态有条件地渲染过渡。

现在，当我关闭抽屉时，过渡效果正常，但是侧面抽屉中的内容在过渡完成之前就消失了。 Here's a GIF showing the problem

这是我的组件现在的样子：

export const SideDrawer = ({ isOpen, closeDrawer, movieId }) => {
  const drawerClass = cx({
    container: true,
    open: isOpen,
  });

  return (
    <div className={drawerClass}>
      <button className={styles.button} onClick={closeDrawer}>
        <img src={backButton} alt={text.alt} />
      </button>
      <MovieBanner movieId={movieId} />
    </div>
  );
};

我尝试使用setTimeout删除侧边栏中的内容，但是它似乎没有用，尽管我可能做错了。任何建议将不胜感激！

这是我的SideDrawer的减速器：

const initialState = {
  isOpen: false,
  movieId: '',
};

export const closeDrawer = () => ({
  type: CLOSE_DRAWER,
});

export const openDrawer = movieId => ({
  type: OPEN_DRAWER,
  payload: movieId,
});

export const drawer = (state = initialState, { type, payload }) => {
  switch (type) {
    case CLOSE_DRAWER:
      return { isOpen: false };
    case OPEN_DRAWER:
      return { isOpen: true, movieId: payload };
    default:
      return state;
  }
};

通过侧边栏转换延迟删除元素

0 个答案: