Css - 实现 360 度图标旋转 2 次点击答案

【问题标题】：Css - achieving 360 deg icon rotate in 2 clicksCss - 实现 360 度图标旋转 2 次点击
【发布时间】：2016-12-23 17:45:16
【问题描述】：

我正在使用 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);
}

我怎样才能以最好的方式实现这一目标？

【问题讨论】：

标签： css reactjs css-transitions css-transforms

【解决方案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);
    }
}

【讨论】：

查看 codepen.io/trys/pen/9b527d6631b424ae11dc59588dab155d 以获得工作演示
它不起作用，第一个动画很好但在第二次点击时，只是文本旋转
是的，刚刚注意到。在 Firefox 上运行良好，在 Chrome 上不行。我现在去看看

【解决方案2】：

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

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

【讨论】：