在Div上添加效果时出现问题

Question

如果我有一个切换按钮，将带来这个＆＃34;迷你抽屉＆＃34;有一些芯片， After pressing the Button

在这种情况下的问题是这个芯片只是屏幕上的POP，我需要添加一些动画像这个抽屉http://www.material-ui.com/#/components/drawer，我试图添加过渡和转换CSS但它不会工作

JS Part：

renderChip() {
console.log("1.30");

return this.state.listChip.map( (i, index) => (
    <Chip className="chips">
        {i.nome}
    </Chip>
    ));
}

toggleList() {
    this.setState({
        visivel: !this.state.visivel,
    });
      //  (this.state.visivel) ? document.getElementById("push").style.width = "0" : document.getElementById("push").style.width = "10px"};

}

render()
{
    return (
        <MuiThemeProvider>
            <div >
                    <div className="anchor">
                        <RaisedButton
                            label="Label before"
                            labelPosition="before"
                            primary={true}
                            onClick = {this.toggleList}
                        />
                    </div>
                    <div id="push" className="anchorz" style={(this.state.visivel) ? styles.wrapper : styles.closed} >
                        {this.renderChip()}
                    </div>
            </div>

        </MuiThemeProvider>
    );
}

CSS部分：

position: fixed;
display: flex;
right: 0;
bottom: 110px;
margin-right: 0;
margin-bottom: 0;
margin-left: 10px;
z-index: 900;
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;*/
overflow-x: hidden;
transition: 0.5s;