Css - 實現360度圖標旋轉，點擊次數爲2次

我正在使用react和我有一個按鈕，點擊按鈕時我想旋轉180度，當它再次點擊時，再次旋轉180度度。我設法將第一次旋轉180度，第二次旋轉180度。Css - 實現360度圖標旋轉，點擊次數爲2次

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); 
}

我怎樣才能做到這一點的最好方法是什麼？

來源

2016-08-17 Pachu

通過使用在默認狀態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); 
    } 
}

來源

2016-08-17 08:19:55 trysmudford

是如何從什麼我想這有什麼不同？ – Pachu

查看http://codepen.io/trys/pen/9b527d6631b424ae11dc59588dab155d進行工作演示 – trysmudford

它不工作，第一個動畫很好，但在第二次點擊，只是文本旋轉 – Pachu

我發現（至少在反應母語）來旋轉所需要的CSS元素定義爲：

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

來源

2017-03-05 16:31:46 omarjebari

Css - 實現360度圖標旋轉，點擊次數爲2次

回答

相關問題