web开发小记2：js触发css过渡

标签&＃xff1a; css

今天开发遇到了而一个问题&＃xff0c;就是用原生的Javascript实现jQuery的fadein效果。

fadeIn() 方法使用淡入效果来显示被选元素&＃xff0c;假如该元素是隐藏的

我的具体思路如下&＃xff1a;

1. 首先解决入的问题&＃xff1a;这个主要使用display实现就可以

2. 淡入&＃xff1a;使用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主要是通过伪元素触发&＃xff0c;其实js也可以触发&＃xff0c;在上述的代码中我们可以看到&＃xff0c;我设置的过渡元素是color&＃xff0c;通过js我获取这个元素&＃xff0c;然后

element.style.color &＃61; "rgb(0,0,0);

1. 但是其中有一个特别重要的问题&＃xff1a;就是我们在使用display设置为block之后&＃xff0c;需要有一个延时&＃xff0c;才能设置color&＃xff0c;否则无法产生过渡效果。

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