flip你的动画

   <p>在vue官方文档上看到vue使用flip做动画，就去研究了一下。这是一个准则，协调js和css对动画的操作。</p>    <h2>flip概念</h2>    <p>首先我们说说flip这几个字母的含义：</p>    <p>F:first，参加过渡元素的初始状态。</p>    <p>L:last，元素的终止状态。</p>    <p>I:invert，这是flip的核心。你通过这个元素的初始状态和终止状态计算出元素改变了什么，比如它的宽、高及透明度，然后你翻转这个改变；举个例子，如果一个元素的初始状态和终止状态之间偏移90px，你应该设置这个元素transform: translateY(-90px)。这个元素好像是在它的初始位置，其实正好相反。</p>    <p>P：play，为你要改变的任何css属性启用tansition，移除你invert的改变。这时你的元素会做动画从起始点到终止点。</p>    <p>以下是代码示例：</p>    <pre>  <code class="language-css">//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');  })</code></pre>    <pre>  <code class="language-css"><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></code></pre>    <h2>使用flip的好处</h2>    <p>你知道getBoundingClientRect()是一个耗费昂贵的操作，它会迫使浏览器发生一次重排。那么为什么我们可以做这消耗不菲的操作呢？</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2dc5277d89ad76313d2983199ab94e84.jpg"></p>    <p>如上图所示，在用户与网站交互后有100ms的空闲时间，如果我们利用这100ms做预计算操作，然后使用css3的transform和opacity执行动画，用户会觉得你的网站响应非常快。</p>    <h2>注意事项</h2>    <p>1、别超过100ms的空闲期：一旦超过这个空闲期，就会造成卡顿的状况出现；使用开发者工具注意这一点。</p>    <p>2、仔细安排动画：想象一下你正在执行你动画中的一个，然后你执行另外一个；这个需要大量的预计算。这会打断正在运行的动画，这是糟糕的。关键是确保你的预计算在用户响应的空闲时间执行，这样两个动画就不会冲突了。</p>    <p>3、使用transform和scale时，元素会被扭曲；虽然可以重构标签避免扭曲，但最终他们会相互影响。</p>    <h2>总结</h2>    <p>flip是一个如何做动画的思考方式，它是使css和js非常好的配合。使用js做计算，使用css做动画。使用css做动画不是一定的，你也可以使用Web Animations API或者单单JavaScript。关键是你要减少每一帧的复杂度（推荐使用transform和opacity）。</p>    <h2>参考</h2>    <p><a href="/misc/goto?guid=4958992201826355074" rel="nofollow,noindex">https://aerotwist.com/blog/fl...</a></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008907850</p>    <p> </p>