Question

我正在尝试创建一个单击（点击）时打开或关闭的菜单。我将这些CSS类应用于JS中的div，具体取决于菜单是打开还是关闭。

@keyframes open {
    from { 
            width: 3em; 
            left: calc(100vw - 3em);
        }
    to {
            left: calc(100vw - 15em);
            width: 15em; 
        }
}

.menu-open {
        width:  15em;
        left: calc(100vw - 15em);
        animation-name: open;
        animation-duration: 0.5s;
        animation-direction: normal;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }

    .menu-close {
        width: 3em;
        left: calc(100vw - 3em);
        animation-name: open;
        animation-duration: 0.5s;
        animation-direction: reverse;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }

这是组件的React代码（它接收一个名为menuOpen的道具来决定应用哪个类）：

class MenuButton extends React.Component {
    constructor(props) {
        super(props);
        this.buttonClick = this.buttonClick.bind(this);

        this.state = { className: 'menubutton' }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.menuOpen)
            this.setState({ className: 'menubutton menu-open' });
        else
            this.setState({ className: 'menubutton menu-close' });
    }

    buttonClick() {
        this.props.onMenuButtonClick();        
    }

    render() {
        return (
                <div className={ this.state.className } onClick={ this.buttonClick }>
                <i className="fa fa-1x fa-cogs"></i>
                </div>
                );
    }
}

我没有使用animation简写来查看我在做什么，而且我没有指定-webkit-和-o-行，因为我首先想要看到它正常工作。

所以问题在于动画是否开始，但是无休止地重复（这是当前版本）或者如果我将animation-iteration-count设置为1，它只运行一次，而且再也不会再切换菜单而不是动画。

有没有办法告诉CSS在最后一个关键帧停止动画或者在完成后重置计数器？是不是animation-fill-mode: forwards;应该阻止它？

CSS动画没有运行或无休止地运行

0 个答案: