Question

我有一个磁贴列表（弹性项目），单击这些磁贴时，应将单击的磁贴扩展为覆盖屏幕，而其他磁贴应淡入背景。似乎正在尝试进行一些相互冲突的样式更改，但我不确定这是不可能的。单击的图块需要扩展，变为绝对值，更改z-index并适合<Main />。其他图块不应受到扩展图块的影响，而应淡入背景作为不同的z索引。

Projects组件包含许多Project。单击的Project图块正在扩展。它的兄弟姐妹不应该在点击时移动，而应顺应较低的z-index，以便展开的Project会在其兄弟姐妹之上扩展。

Projects：

  render() {
    return (
      <Main>
        <ListContainer>
          {this._list()} {/* Contains <Project /> */}
        </ListContainer>
      </Main>
    )
  }

Projects样式：

const Main = styled.nav`
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`
const ListContainer = styled.section`
  flex: 1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`

每个Project组件：

_component = () => {
  const { module: Component } = this.state
  if (!Component) return <div></div>
  return <Component size={this.state.size} />
}

...

return (
  <ItemContainer
    onMouseEnter={() => {
      this.setState({ hover: true })
    }}
    onMouseLeave={() => {
      this.setState({ hover: false })
    }}
    onClick={() => {
      this.setState({ expand: true })
    }}
    hover={this.state.hover}
    //expand={this.state.expand}
  >
    <header>
      {name || 'placeholder'}
    </header>
    {this._component()}
  </ItemContainer>
)

Project样式：

const ItemContainer = styled.article`
  position: relative;
  height: ${TILE_SIZE}px;
  width: ${TILE_SIZE}px;
  margin-top: 32px;
  margin-left: 32px;
  margin-right: 32px;
  border-radius: 32px;
  overflow: hidden;
  cursor: pointer;

  ${ props => props.hover ?
    css`
      transform: scale(1.1);
    `
  : null}

  div {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: ${TILE_SIZE}px;
    width: ${TILE_SIZE}px;
    border-radius: 32px;
    background-color: paleturquoise;
    overflow: hidden;
  }

  canvas {
    flex: 1;
  }

  header {
    justify-content: flex-start;
    align-items: flex-start;
    height: ${TILE_SIZE - 32}px;
    width: ${TILE_SIZE - 32}px;
    background-color: rgba(0,0,0,0.1);
    padding: 16px;
    color: rgb(255,255,255);
    z-index: 1;
  }
`

现在，我倾向于更多地关注CSS网格，以实现更加动态的布局更改。我希望在隐藏和扩展图块时具有更好的过渡和动画效果。

将单个弹性项目扩展为模型

0 个答案: