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