web開發(fā)小記2：js觸發(fā)css過渡

snowell 發(fā)布于2019-08-29 11:06 / 1063人閱讀

標(biāo)簽： css

今天開發(fā)遇到了而一個問題，就是用原生的JavaScript實(shí)現(xiàn)jQuery的fadein效果。

fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的

我的具體思路如下：

首先解決入的問題：這個主要使用display實(shí)現(xiàn)就可以

淡入：使用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主要是通過偽元素觸發(fā)，其實(shí)js也可以觸發(fā)，在上述的代碼中我們可以看到，我設(shè)置的過渡元素是color，通過js我獲取這個元素，然后

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

但是其中有一個特別重要的問題：就是我們在使用display設(shè)置為block之后，需要有一個延時，才能設(shè)置color，否則無法產(chǎn)生過渡效果。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111430.html

相關(guān)文章

前端小記4——高性能mobile web開發(fā)

摘要：高性能動畫與端場景需要相比，移動端需要考慮的因素也相對復(fù)雜，重點(diǎn)考慮流量功耗與流暢度。而在移動端，我們選擇性能更優(yōu)瀏覽器原生實(shí)現(xiàn)方案動畫。然而，動畫在移動多終端設(shè)備場景下，相比會面對更多的性能問題，主要體現(xiàn)在動畫的卡頓與閃爍。1.高性能CSS3動畫與PC端場景需要相比，移動web端需要考慮的因素也相對復(fù)雜，重點(diǎn)考慮：流量、功耗與流暢度。在pc端上考慮更多的是流暢度，而mobile web中...

番茄西紅柿 2019-04-23 13:31 評論0 收藏0
JavaScript是如何工作的: CSS 和 JS 動畫底層原理及如何優(yōu)化它們的性能

摘要：貝塞爾曲線貝塞爾曲線是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。通過調(diào)整控制點(diǎn)，貝塞爾曲線的形狀會發(fā)生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個值，或者更準(zhǔn)確地說它需要兩對數(shù)字。每對描述立方貝塞爾曲線控制點(diǎn)的和坐標(biāo)。這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 13 篇。如果你錯過了前面的章節(jié)，可以在這里找到它們： JavaScript 是如何工作的：...

darcrand 2019-08-23 14:47 評論0 收藏0
FEDay 參會小記

摘要：介紹微信風(fēng)格的，與客戶端體驗(yàn)一致，這個自己去微信上看吧，略。微信調(diào)試一件套，網(wǎng)頁授權(quán)模擬集成代理遠(yuǎn)程調(diào)試。這些在微信開發(fā)者中心有介紹，略。年微信開發(fā)經(jīng)驗(yàn)的人，終于又成為了零年開發(fā)經(jīng)驗(yàn)的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活動地址：http://fequan.com/2016/ 注意：英文不好，小記也帶有自己...

xcc3641 2019-08-19 17:53 評論0 收藏0
使用vue完成微信公眾號網(wǎng)頁小記

摘要：前言公司最近有一個頁面的功能，比較簡單的一個調(diào)查表功能，嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能，首先是上微信公眾平臺上邊看看，把權(quán)限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言：公司最近有一個H5頁面的功能，比較簡單的一個調(diào)查...

phoenixsky 2019-08-02 16:14 評論0 收藏0
使用vue完成微信公眾號網(wǎng)頁小記

摘要：前言公司最近有一個頁面的功能，比較簡單的一個調(diào)查表功能，嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能，首先是上微信公眾平臺上邊看看，把權(quán)限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言：公司最近有一個H5頁面的功能，比較簡單的一個調(diào)查...

notebin 2019-08-23 17:11 評論0 收藏0