CSS+JavaScript封裝一個圖標旋轉組件

1. 前言：

    由於自己想封裝一個類似Bootstrap的前端框架，當然也只是簡單實現。看見了一個網站上的上下箭頭的旋轉動態效果，於是就想着自己也來封裝一個這個效果。效果如下：

2. 說明：

    圖標是文字圖標，也即是svg生成的字體。所以在頁面顯示字體圖標就需要結合content和僞類before或者after來使用。

3. 思考：

    不妨先來理理思路。旋轉效果我們需要用到css的rotate()屬性，而直接使用rotate()屬性，就看不到這個動態變化的過程，故而我們還需要css過渡屬性，也即是transition屬性。
    也即是旋轉+過渡。
    值得注意的在於，CSS過渡屬性，是元素從一種樣式逐漸改變爲另一種的效果，也就是說：

• 這個元素上的樣式要前後有變化；
• 而且這個變化是作用在同一個元素上的；

    前面我們提到了，我們要實現的字體圖標，是利用僞類元素before或者after結合content來設置的內容，但是僞類before或者after並沒有什麼額外的方式觸發，故而這個僞類不能用於設置前後兩個樣式的狀態改變。

4. 思路：

    1. 不妨利用僞類hover，hover有觸發前後觸發後兩個狀態，故而可以設置兩個樣式，然後爲這個過程添加過渡，就可以實現上面的效果。
    2. 結合javascript，動態的創建某個類樣式，在css中利用父子元素指定第二個樣式，由於javascript還沒有添加類樣式到html中，故而找不到，在滿足某種判斷條件，就使用javascript來動態加入類樣式，從而就可以做到樣式的前後兩個狀態。
    3. 直接使用JavaScript，找到這個元素，然後設置旋轉，多次設置，緩慢增加旋轉的角度，也可以實現。

5. 實現：

    第一種方式使用僞類hover的侷限性比較大，故而這裏不採用這種方式。第二種方式和第三種比較一下，在JavaScript中純粹的使用js來旋轉，不太容易控制角度問題，其次當使用定時器來操作的時候，清除定時器，需要浪費一個定時器。感覺不太理想。故而我採用第二種方式。
首先，html標籤如下：

<span id="item" class="item"><i class="home"></i></span>

    要旋轉的對象也就是標籤i顯示的字體圖標。

5.1 定義同一個標籤的兩個樣式狀態

對應的css文件如下：

/* 標籤i的通用的字體樣式 */
[class*='item']>.home{
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 60px;
	font-size: 1.5rem;
	text-align: center;
	display: inline-block;
	cursor: pointer;
}
.home:before{
	content: "\e902";
}
/* 標籤i的第一個樣式狀態 */
span.item>.home{
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);		
	-webkit-transform: rotate(0deg);	
	-o-transform: rotate(0deg);		
	-moz-transform: rotate(0deg);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
span.item-go>.home::before{
	content: '\e902';
}
/* 標籤i的第二個樣式狀態 */
span.item-go>.home{
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);		
	-webkit-transform: rotate(180deg);	
	-o-transform: rotate(180deg);		
	-moz-transform: rotate(180deg);		
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

順便一提：
我的字體文件是從阿里雲圖標庫中下載的SVG字體圖標文件，然後在iconmoon網站上集成的字體文件，最後生成的字體文件中，'\e902'對應的圖標如下：

值得注意的是：
對於第一個i標籤的字體樣式我在這裏是爲了理解方便加上了，旋轉0度可以不寫，也即是：

/* 標籤i的第一個樣式狀態 */
span.item>.home{
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

接着來使用JavaScript來控制上面定義的類樣式的狀態的切換。

5.2 JavaScript切換樣式

    使用JavaScript來切換樣式，以達到同一個標籤，有前後兩個不同的樣式狀態的改變。
對應的JavaScript代碼如下：

function arrow_clicked(){
	var item = document.getElementById('item');
	var deg = 0;
	item.onclick = function(){
		var class_name = item.className;
		if(/[\-]+/ig.test(class_name)){
			item.className = 'item';
		}else{
			item.className = 'item-go';
		}
	}
}

效果：