亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

flip你的動(dòng)畫

vibiu / 2505人閱讀

摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動(dòng)畫優(yōu)化，理解本篇文章還是很簡(jiǎn)單的。，元素的終止?fàn)顟B(tài)。這會(huì)打斷正在運(yùn)行的動(dòng)畫，這是糟糕的。關(guān)鍵是確保你的預(yù)計(jì)算在用戶響應(yīng)的空閑時(shí)間執(zhí)行，這樣兩個(gè)動(dòng)畫就不會(huì)沖突了。

在vue官方文檔上看到vue使用flip做動(dòng)畫，就去研究了一下。這是一個(gè)準(zhǔn)則，協(xié)調(diào)js和css對(duì)動(dòng)畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動(dòng)畫優(yōu)化，理解本篇文章還是很簡(jiǎn)單的。

flip概念

首先我們說說flip這幾個(gè)字母的含義：

F:first，參加過渡元素的初始狀態(tài)。
L:last，元素的終止?fàn)顟B(tài)。
I:invert，這是flip的核心。你通過這個(gè)元素的初始狀態(tài)和終止?fàn)顟B(tài)計(jì)算出元素改變了什么，比如它的寬、高及透明度，然后你翻轉(zhuǎn)這個(gè)改變；舉個(gè)例子，如果一個(gè)元素的初始狀態(tài)和終止?fàn)顟B(tài)之間偏移90px，你應(yīng)該設(shè)置這個(gè)元素transform: translateY(-90px)。這個(gè)元素好像是在它的初始位置，其實(shí)正好相反。
P：play，為你要改變的任何css屬性啟用tansition，移除你invert的改變。這時(shí)你的元素會(huì)做動(dòng)畫從起始點(diǎn)到終止點(diǎn)。

以下是代碼示例：

//js
var app = document.getElementById("app");
var first = app.getBoundingClientRect();
app.classList.add("app-to-end");
var last = app.getBoundingClientRect();
var invert = first.top - last.top;
//使元素看起來(lái)好像在起始點(diǎn)
app.style.transform = `translateY(${invert}px)`;
requestAnimationFrame(function() {
   //啟用tansition，并移除翻轉(zhuǎn)的改變
  app.classList.add("animate-on-transforms");
  app.style.transform = "";
});
app.addEventListener("transitionend", () => {
  app.classList.remove("animate-on-transforms");
})
使用flip的好處

看到這里，如果你看過我的上一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動(dòng)畫優(yōu)化，你知道getBoundingClientRect()是一個(gè)耗費(fèi)昂貴的操作，它會(huì)迫使瀏覽器發(fā)生一次重排。那么為什么我們可以做這消耗不菲的操作呢？

如上圖所示，在用戶與網(wǎng)站交互后有100ms的空閑時(shí)間，如果我們利用這100ms做預(yù)計(jì)算操作，然后使用css3的transform和opacity執(zhí)行動(dòng)畫，用戶會(huì)覺得你的網(wǎng)站響應(yīng)非?？?。

注意事項(xiàng)

1、別超過100ms的空閑期：一旦超過這個(gè)空閑期，就會(huì)造成卡頓的狀況出現(xiàn)；使用開發(fā)者工具注意這一點(diǎn)。
2、仔細(xì)安排動(dòng)畫：想象一下你正在執(zhí)行你動(dòng)畫中的一個(gè)，然后你執(zhí)行另外一個(gè)；這個(gè)需要大量的預(yù)計(jì)算。這會(huì)打斷正在運(yùn)行的動(dòng)畫，這是糟糕的。關(guān)鍵是確保你的預(yù)計(jì)算在用戶響應(yīng)的空閑時(shí)間執(zhí)行，這樣兩個(gè)動(dòng)畫就不會(huì)沖突了。
3、使用transform和scale時(shí)，元素會(huì)被扭曲；雖然可以重構(gòu)標(biāo)簽避免扭曲，但最終他們會(huì)相互影響。

總結(jié)

flip是一個(gè)如何做動(dòng)畫的思考方式，它是使css和js非常好的配合。使用js做計(jì)算，使用css做動(dòng)畫。使用css做動(dòng)畫不是一定的，你也可以使用Web Animations API或者單單JavaScript。關(guān)鍵是你要減少每一幀的復(fù)雜度（推薦使用transform和opacity）。

參考

https://aerotwist.com/blog/fl...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111815.html

相關(guān)文章

  • flip你的動(dòng)畫

    摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動(dòng)畫優(yōu)化，理解本篇文章還是很簡(jiǎn)單的。，元素的終止?fàn)顟B(tài)。這會(huì)打斷正在運(yùn)行的動(dòng)畫，這是糟糕的。關(guān)鍵是確保你的預(yù)計(jì)算在用戶響應(yīng)的空閑時(shí)間執(zhí)行，這樣兩個(gè)動(dòng)畫就不會(huì)沖突了。 在vue官方文檔上看到vue使用flip做動(dòng)畫，就去研究了一下。這是一個(gè)準(zhǔn)則，協(xié)調(diào)js和css對(duì)動(dòng)畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動(dòng)畫...

    SoapEye 評(píng)論0 收藏0

  • Vue一個(gè)案例引發(fā)「動(dòng)畫」的使用總結(jié)

    摘要：既然我們知道了方法，我們就來(lái)給它加一個(gè)簡(jiǎn)單的動(dòng)畫。動(dòng)畫中還給我們提供了一些鉤子函數(shù)，我們可以使用鉤子函數(shù)構(gòu)建動(dòng)畫。它會(huì)告知我們的動(dòng)畫完成，我們綁定了為，告訴組件跳過的檢測(cè)，使用。 項(xiàng)目開發(fā)中動(dòng)畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標(biāo)的進(jìn)入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網(wǎng)頁(yè)上的動(dòng)畫無(wú)處不在，也有人說了，這些東西也可以不使用動(dòng)畫。 對(duì)，你說的沒錯(cuò)...

    liuchengxu 評(píng)論0 收藏0

  • 實(shí)現(xiàn)平滑過渡的拖拽排序

    摘要：將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標(biāo)元素和目標(biāo)元素周圍的元素要怎么平滑過渡到新的位置。 最近重讀Vue官方文檔，在列表的排序過渡這一小節(jié)，文檔提到， 組件有一個(gè)特殊的地方，不僅可以實(shí)現(xiàn)進(jìn)入和離開動(dòng)畫，還可以改變定位，官網(wǎng)示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實(shí)現(xiàn)的效果看起來(lái)還...

    chengjianhua 評(píng)論0 收藏0

  • 實(shí)現(xiàn)平滑過渡的拖拽排序

    摘要：將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標(biāo)元素和目標(biāo)元素周圍的元素要怎么平滑過渡到新的位置。 最近重讀Vue官方文檔，在列表的排序過渡這一小節(jié)，文檔提到， 組件有一個(gè)特殊的地方，不僅可以實(shí)現(xiàn)進(jìn)入和離開動(dòng)畫，還可以改變定位，官網(wǎng)示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實(shí)現(xiàn)的效果看起來(lái)還...

    Lowky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<