Question

我正在尝试创建右侧屏幕导航。与this类似的东西。我正在关注tutorial，但我自己做了修改。

我正在reactjs和CSS中构建此内容。

我目前无法让前端的外观/行为与this相同。我想可能是我不是用.nav-trigger:checked + .site选择正确的标签。

我希望在取消选中标签时隐藏<ul>。选中后，<label>将向左移动215px，带.site的元素将向右移动200px，显示基础<ul>。

这是我的jsfiddle：

Answer 1

你可以这样做。

开始时隐藏导航并仅显示汉堡包图标。您可以使用transform: translateX()执行此操作。您可以使用display: none，但display: none您无法动画。
然后点击汉堡图标将状态更改为true（根据州值，我们将呈现一个类以显示导航）。
然后渲染一个var（例如open），如果this.state.open为false（nav div只有nav类），它将为空

let open = this.state.open ? "open" : "";
如果this.state.open为真，那么var open将是open（nav div将有两个类nav和open）。

您可以这样做：

class Test extends React.Component {
    constructor(props){
        super(props);
          this.state = {
            open: false
          }
    }

    toggleNav(){
        this.setState({open: !this.state.open});
    }

    render(){
        let open = this.state.open ? "open" : "";
        return (
        <div>
            <div className={`nav ${open}`}>
               <div className="icon">
                   <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" onClick={this.toggleNav.bind(this)}/>   
               </div>
          </div>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

并按如下方式添加css：

.nav{
  width: 200px;
  height: 800px;
  background-color: yellow;
  position: relative;
  transform: translateX(-208px);
  transition: all 1s ease-out;
}

.icon img{
  width: 50px;
  position: absolute;
  right: -50px;
}

.open{
  transform: translateX(0);
}

Here is a fiddle to play with.

屏幕外汉堡导航

1 个答案: