博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web开发小记2:js触发css过渡
阅读量:6969 次
发布时间:2019-06-27

本文共 625 字,大约阅读时间需要 2 分钟。

标签: 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);

转载地址:http://lissl.baihongyu.com/

你可能感兴趣的文章
关hbase安装的困惑整了两天了还是这个报错!
查看>>
一个完整的nginx生产配置示例
查看>>
SVG格式图片相关
查看>>
OrderLogic
查看>>
CISCO_3750升级IOS实例
查看>>
folder.htt等文件的问题
查看>>
成本管理的6个基本内容
查看>>
企业渠道管理的六大失误
查看>>
CSS伪类与CSS伪元素的区别及由来具体说明
查看>>
asp.net aspx页面绑定数据
查看>>
AMD CEO罗瑞德称将调整战略 应对市场变化
查看>>
SSH的复习资料,找到宝了!
查看>>
Linux:无密码登录linux服务器
查看>>
JDBC 原理浅析
查看>>
android中SurfaceView组件使用解析
查看>>
python符号计算
查看>>
解决JsonFormat日期少一天问题
查看>>
面试常见问题
查看>>
我的友情链接
查看>>
@Transactional
查看>>