Css - 在两次点击中实现 360 度图标旋转

Question

我正在使用 React，我有一个按钮，单击该按钮时我想将其旋转 180 度，再次单击该按钮时，再次将其旋转 180 度。我设法做的是第一次将它旋转 180 度，第二次旋转 180 度。

jsx:

export default class SomeComponent extends React.Component {
    render () {
        let classes = 'icon';
        if (this.props.isSelected) {
            classes += ' selected';
        }

        return (
            <IconButton className={classes}>expand_more</IconButton>
        )
    }
}

CSS:

.icon {
    transition-duration: .5s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.6,0);
}

.icon.selected {
    transform: rotate(180deg);
}

我怎样才能以最好的方式实现它？

Answer 1

通过在默认状态上使用transition，在选中状态上使用animation，可以达到这样的效果:

.icon {
    transform: rotate(360deg);
    transition: 300ms transform;
}

.icon.selected {
    animation: spin 300ms;
    transform: rotate(180deg);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}