web開發小記2：js觸發css過渡

標籤： css

---

今天開發遇到了而一個問題，就是用原生的JavaScript實現jQuery的fadein效果。

fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的

個人具體思路以下：

1. 首先解決入的問題：這個主要使用display實現就能夠

2. 淡入：使用css3的transition過渡效果

color: rgb(255,255,255);
-webkit-transition: color linear 1s;
-moz-transition: color linear 1s;
-o-transition: color linear 1s;
-ms-transition: color linear 1s;
transition: color linear 1s;

transition主要是經過僞元素觸發，其實js也能夠觸發，在上述的代碼中咱們能夠看到，我設置的過渡元素是color，經過js我獲取這個元素，而後

element.style.color = "rgb(0,0,0);

1. 可是其中有一個特別重要的問題：就是咱們在使用display設置爲block以後，須要有一個延時，才能設置color，不然沒法產生過渡效果。

setTimeout(function(){
    var co = getElementsID("#result1");
    co.style.color = "rgb(0,0,0)";
    },100);