在vue官方文档上看到vue是用flip做动画的，于是就去研究了一下。这是协调js和css在动画上运行的指南。如果你看过我之前的文章，一篇讲解浏览器解析和CSS（GPU）动画优化的文章，理解这篇文章还是很简单的。flip概念首先说一下flip这几个字母的含义：F：首先，过渡元素的初始状态。L:last，元素的最终状态。I：invert，这是flip的核心。你使用元素的初始状态和最终状态来计算元素发生了什么变化，比如它的宽度、高度和透明度，然后你翻转这个变化；例如，如果一个元素的初始状态和最终状态偏移了90px，你应该设置这个元素变换：translateY(-90px)。该元素看似处于其初始位置，但实际上恰恰相反。P：播放，为您想要更改的任何css属性启用转换，并删除您的反转更改。此时您的元素将从起点到终点进行动画处理。这是一个代码示例：//jsvarapp=document.getElementById('app');varfirst=app.getBoundingClientRect();app.classList.add('app-to-end');varlast=app.getBoundingClientRect();varinvert=first.top-last.top;//让元素看起来像是在起点app.style.transform=`translateY(${invert}px)`;requestAnimationFrame(function(){//启用转换并删除翻转的更改app.classList.add('animate-on-transforms');app.style.transform='';});app.addEventListener('transitionend',()=>{app.classList.remove('animate-on-transforms');})
