flip你的动画

SoapEye 发布于2019-08-20 15:31 / 1960人阅读

摘要：如果你看到我的前一篇文章一篇文章说清浏览器解析和动画优化，理解本篇文章还是很简单的。，元素的终止状态。这会打断正在运行的动画，这是糟糕的。关键是确保你的预计算在用户响应的空闲时间执行，这样两个动画就不会冲突了。

在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");
})

使用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）。

参考

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82304.html

flip你的动画

摘要：如果你看到我的前一篇文章一篇文章说清浏览器解析和动画优化，理解本篇文章还是很简单的。，元素的终止状态。这会打断正在运行的动画，这是糟糕的。关键是确保你的预计算在用户响应的空闲时间执行，这样两个动画就不会冲突了。在vue官方文档上看到vue使用flip做动画，就去研究了一下。这是一个准则，协调js和css对动画的操作。如果你看到我的前一篇文章一篇文章说清浏览器解析和CSS（GPU）动画...

vibiu 2019-08-29 12:19 评论0 收藏0
Vue一个案例引发「动画」的使用总结

摘要：既然我们知道了方法，我们就来给它加一个简单的动画。动画中还给我们提供了一些钩子函数，我们可以使用钩子函数构建动画。它会告知我们的动画完成，我们绑定了为，告诉组件跳过的检测，使用。项目开发中动画有着很重要的作用，而且也是用到的地方非常多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，可以说我们网页上的动画无处不在，也有人说了，这些东西也可以不使用动画。对，你说的没错...

liuchengxu 2019-08-23 13:43 评论0 收藏0
实现平滑过渡的拖拽排序

摘要：将元素由拖拽开始的地方移到拖拽结束地方，这期间，目标元素和目标元素周围的元素要怎么平滑过渡到新的位置。最近重读Vue官方文档，在列表的排序过渡这一小节，文档提到，组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中实现的效果看起来还...

chengjianhua 2019-08-30 11:09 评论0 收藏0
实现平滑过渡的拖拽排序

摘要：将元素由拖拽开始的地方移到拖拽结束地方，这期间，目标元素和目标元素周围的元素要怎么平滑过渡到新的位置。最近重读Vue官方文档，在列表的排序过渡这一小节，文档提到，组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中实现的效果看起来还...

Lowky 2019-08-23 18:04 评论0 收藏0