在vue官方文档上看到vue运用flip做动画，就去研讨了一下。这是一个原则，谐和js和css对动画的操纵。假如你看到我的前一篇文章一篇文章说清浏览器剖析和CSS（GPU）动画优化，明白本篇文章照样很简单的。
flip观点
起首我们说说flip这几个字母的寄义：
F:first，列入过渡元素的初始状态。
L:last，元素的停止状态。
I:invert，这是flip的中心。你经由过程这个元素的初始状态和停止状态盘算出元素转变了什么，比方它的宽、高及透明度，然后你翻转这个转变；举个例子，假如一个元素的初始状态和停止状态之间偏移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，并移除翻转的转变
app.classList.add('animate-on-transforms');
app.style.transform = '';
});
app.addEventListener('transitionend', () => {
app.classList.remove('animate-on-transforms');
})<div id="app"></div>
<style>
#app{
position: absolute;
width:20px;
height:20px;
background: red;
}
.app-to-end{
top: 100px;
}
.animate-on-transforms{
transition: all 2s;
}
</style>运用flip的优点
看到这里，假如你看过我的上一篇文章一篇文章说清浏览器剖析和CSS（GPU）动画优化，你晓得getBoundingClientRect()是一个斲丧高贵的操纵，它会迫使浏览器发作一次重排。那末为何我们能够做这斲丧不菲的操纵呢？
如上图所示，在用户与网站交互后有100ms的余暇时候，假如我们应用这100ms做预盘算操纵，然后运用css3的transform和opacity实行动画，用户会以为你的网站相应非常快。
注重事项
1、别凌驾100ms的余暇期：一旦凌驾这个余暇期，就会形成卡顿的状态涌现；运用开发者东西注重这一点。
2、细致部署动画：设想一下你正在实行你动画中的一个，然后你实行别的一个；这个须要大批的预盘算。这会打断正在运转的动画，这是蹩脚的。关键是确保你的预盘算在用户相应的余暇时候实行，如许两个动画就不会争执了。
3、运用transform和scale时，元素会被歪曲；虽然能够重构标签防止歪曲，但终究他们会相互影响。
总结
flip是一个如何做动画的思索体式格局，它是使css和js非常好的合营。运用js做盘算，运用css做动画。运用css做动画不是肯定的，你也能够运用Web Animations API或许单单JavaScript。关键是你要削减每一帧的复杂度（引荐运用transform和opacity）。
