drawer to right cancel drawer

drawLeft.js

/*
*
刘明泰
mail:[email protected]
github:lazyTai
*/
import React, {Component} from 'react';


class BooksList extends Component {
    state = {
        a: 1, b: 2
    }

    showDraw() {
        var {drawer, backMark} = this.refs
        drawer.classList.add('active_in');
        backMark.classList.toggle('active');
    }

    closeShow() {
        var {drawer, backMark} = this.refs
        drawer.classList.add('active_out');
        backMark.classList.toggle('active');
        setTimeout(function () {
            drawer.classList.remove('active_out');
            drawer.classList.remove('active_in');
        }, 500)
        // drawer.classList.add('active-out');
        // drawer.classList.toggle('active-out');

    }

    render() {


        return <div>
            <button onClick={this.showDraw.bind(this)}>anniu</button>
            <div className="drawer" ref="drawer">
                sdfsdfsdf
            </div>
            <div className="backMark" ref="backMark" onClick={this.closeShow.bind(this)}></div>
        </div>
    }
}

export default BooksList

index.css

:global(html) {
    padding: 0;
    margin: 0;
}

:global(body) {
    padding: 0;
    margin: 0;
}

:global(.drawer) {
    transform: translateX(-100%);
    position: absolute;
    top: 0;
    width: 30%;
    background: #fff;
    height: 100%;
    z-index: 9;
}

:global(.backMark) {
    transform: translateX(-100%);
    background: #222;
    position: absolute;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
}

:global(.backMark.active) {
    transform: translateX(0%);
}

:global(.drawer.active_in) {
    transform: translateX(0%);
    transition: all 300ms ease-in-out
}
:global(.drawer.active_out) {
    transform: translateX(-100%);
    transition: all 300ms ease-in-out
}