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

标签: css

---

今天开发遇到了而一个问题,就是用原生的JavaScript实现jQuery的fadein效果。

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

我的具体思路如下:

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

2. 淡入:使用css3的transition过渡效果

```css

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我获取这个元素,然后

```javascript

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

```

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

```javascript

setTimeout(function(){

var co = getElementsID("#result1");

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

},100);

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,846评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,848评论 0 2
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,295评论 14 51
  • 把天儿的蔚蓝, 铺在纸上, 立体成满目的雀跃, 贴身携带, 怀揣一整天的温度, 寄给你, 盛开在北方的雪。 星空的...
    罗子阅读 3,989评论 93 108
  • Mac下最好的鼠标,没有之一 从上到下依次为: 罗技 MX Master 雷蛇 炼狱蝰蛇 苹果 Magic Mou...
    长岛冰泪Willin阅读 13,573评论 4 2