Question

我正在使用反应并且我有一个按钮，当点击按钮时我想将它旋转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);
    }
}

Answer 2

我发现（至少在react-native中）旋转元素所需的CSS定义为：

transform: [{rotate: '360deg'}]

Css - 通过2次点击实现360度图标旋转

2 个答案: