资讯专栏INFORMATION COLUMN

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

snowell / 1054人阅读

标签: css

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

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

我的具体思路如下:

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

淡入:使用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);

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111430.html

相关文章

  • 前端小记4——高性能mobile web开发

    摘要:高性能动画与端场景需要相比,移动端需要考虑的因素也相对复杂,重点考虑流量功耗与流畅度。而在移动端,我们选择性能更优浏览器原生实现方案动画。然而,动画在移动多终端设备场景下,相比会面对更多的性能问题,主要体现在动画的卡顿与闪烁。1.高性能CSS3动画 与PC端场景需要相比,移动web端需要考虑的因素也相对复杂,重点考虑:流量、功耗与流畅度。在pc端上考虑更多的是流畅度,而mobile web中...

    番茄西红柿 评论0 收藏0
  • JavaScript是如何工作的: CSSJS 动画底层原理及如何优化它们的性能

    摘要:贝塞尔曲线贝塞尔曲线是应用于二维图形应用程序的数学曲线。通过调整控制点,贝塞尔曲线的形状会发生变化。让我们看看贝塞尔曲线的工作原理。贝塞尔曲线需要四个值,或者更准确地说它需要两对数字。每对描述立方贝塞尔曲线控制点的和坐标。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 13 篇。 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:...

    darcrand 评论0 收藏0
  • FEDay 参会小记

    摘要:介绍微信风格的,与客户端体验一致,这个自己去微信上看吧,略。微信调试一件套,网页授权模拟集成代理远程调试。这些在微信开发者中心有介绍,略。年微信开发经验的人,终于又成为了零年开发经验的人,重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活动地址:http://fequan.com/2016/ 注意:英文不好,小记也带有自己...

    xcc3641 评论0 收藏0
  • 使用vue完成微信公众号网页小记

    摘要:前言公司最近有一个页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面。同时用到了微信的登录和分享接口。参考链接使用微信接口前端部分我们用微信接口主要是做的登录和分享功能,首先是上微信公众平台上边看看,把权限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言: 公司最近有一个H5页面的功能,比较简单的一个调查...

    phoenixsky 评论0 收藏0
  • 使用vue完成微信公众号网页小记

    摘要:前言公司最近有一个页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面。同时用到了微信的登录和分享接口。参考链接使用微信接口前端部分我们用微信接口主要是做的登录和分享功能,首先是上微信公众平台上边看看,把权限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言: 公司最近有一个H5页面的功能,比较简单的一个调查...

    notebin 评论0 收藏0

发表评论

0条评论

snowell

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<