相关疑难解决方法(0)

所以,我理解如何执行CSS3过渡和动画.什么不清楚,我用Google搜索,是什么时候使用哪个.

例如,如果我想让球反弹,很明显动画是要走的路.我可以提供关键帧,浏览器会做中间体帧,我会有一个很好的动画.

然而,存在可以以任一方式实现所述效果的情况.一个简单而常见的例子是实现facebook风格的滑动抽屉菜单:

这种效果可以通过如下过渡来实现:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

或者,通过这样的动画:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

使用HTML看起来像这样:

<div …

我正在使用一个项目,我有一个菜单按钮.

<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>

Sidenav组件如:

<Sidenav ref="menu" />

我编写了以下代码来切换菜单:

class Header extends React.Component {

    constructor(props){
        super(props);
        this.toggleSidenav = this.toggleSidenav.bind(this);
    }

    render() {
        return (
          <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
          <a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
          <Menu className="menu hide-on-small-and-down"/>
          <Sidenav />
        </div>
          </div>
        )
    }

    toggleSidenav() {
        this.refs.btn.classList.toggle('btn-menu-open');
    }

    componentDidMount() {
        this.refs.btn.addEventListener('click', this.toggleSidenav);
    }

    componentWillUnmount() {
        this.refs.btn.removeEventListener('click', this.toggleSidenav);
    }
}

事情是,这this.refs.sidenav不是一个DOM元素,我不能在他身上添加一个类.

有人可以解释我如何Sidenav在我的按钮上切换组件上的类吗？