資訊專欄INFORMATION COLUMN
摘要：如果你看到我的前一篇文章一篇文章說清瀏覽器解析和動畫優(yōu)化，理解本篇文章還是很簡單的。，元素的終止狀態(tài)。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執(zhí)行，這樣兩個動畫就不會沖突了。
在vue官方文檔上看到vue使用flip做動畫，就去研究了一下。這是一個準則，協(xié)調(diào)js和css對動畫的操作。如果你看到我的前一篇文章一篇文章說清瀏覽器解析和CSS（GPU）動畫優(yōu)化，理解本篇文章還是很簡單的。
flip概念首先我們說說flip這幾個字母的含義：
F:first，參加過渡元素的初始狀態(tài)。
L:last，元素的終止狀態(tài)。
I:invert，這是flip的核心。你通過這個元素的初始狀態(tài)和終止狀態(tài)計算出元素改變了什么，比如它的寬、高及透明度，然后你翻轉(zhuǎn)這個改變；舉個例子，如果一個元素的初始狀態(tài)和終止狀態(tài)之間偏移90px，你應該設置這個元素transform: translateY(-90px)。這個元素好像是在它的初始位置，其實正好相反。
P：play，為你要改變的任何css屬性啟用tansition，移除你invert的改變。這時你的元素會做動畫從起始點到終止點。
以下是代碼示例：
//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;
//使元素看起來好像在起始點
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）動畫優(yōu)化，你知道getBoundingClientRect()是一個耗費昂貴的操作，它會迫使瀏覽器發(fā)生一次重排。那么為什么我們可以做這消耗不菲的操作呢？
如上圖所示，在用戶與網(wǎng)站交互后有100ms的空閑時間，如果我們利用這100ms做預計算操作，然后使用css3的transform和opacity執(zhí)行動畫，用戶會覺得你的網(wǎng)站響應非?？?。
注意事項1、別超過100ms的空閑期：一旦超過這個空閑期，就會造成卡頓的狀況出現(xiàn)；使用開發(fā)者工具注意這一點。
2、仔細安排動畫：想象一下你正在執(zhí)行你動畫中的一個，然后你執(zhí)行另外一個；這個需要大量的預計算。這會打斷正在運行的動畫，這是糟糕的。關鍵是確保你的預計算在用戶響應的空閑時間執(zhí)行，這樣兩個動畫就不會沖突了。
3、使用transform和scale時，元素會被扭曲；雖然可以重構(gòu)標簽避免扭曲，但最終他們會相互影響。
flip是一個如何做動畫的思考方式，它是使css和js非常好的配合。使用js做計算，使用css做動畫。使用css做動畫不是一定的，你也可以使用Web Animations API或者單單JavaScript。關鍵是你要減少每一幀的復雜度（推薦使用transform和opacity）。
參考https://aerotwist.com/blog/fl...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111815.html
摘要：既然我們知道了方法，我們就來給它加一個簡單的動畫。動畫中還給我們提供了一些鉤子函數(shù)，我們可以使用鉤子函數(shù)構(gòu)建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。 項目開發(fā)中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標的進入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網(wǎng)頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。 對，你說的沒錯...
摘要：將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。 最近重讀Vue官方文檔，在列表的排序過渡這一小節(jié)，文檔提到， 組件有一個特殊的地方，不僅可以實現(xiàn)進入和離開動畫，還可以改變定位，官網(wǎng)示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實現(xiàn)的效果看起來還...
摘要：將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。 最近重讀Vue官方文檔，在列表的排序過渡這一小節(jié)，文檔提到， 組件有一個特殊的地方，不僅可以實現(xiàn)進入和離開動畫，還可以改變定位，官網(wǎng)示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實現(xiàn)的效果看起來還...
閱讀 1125·2021-11-24 10:21
閱讀 2561·2021-11-19 11:35
閱讀 1662·2019-08-30 15:55
閱讀 1293·2019-08-30 15:54
閱讀 1192·2019-08-30 15:53
閱讀 3499·2019-08-29 17:21
閱讀 3308·2019-08-29 16:12
閱讀 3412·2019-08-29 15:23
