让咱们来写一个卡片弹出动画

准备工做

为了能更容易理解，在开始以前，咱们要先达成4个共识。

这 4个共识 是

唱 跳 rap 打篮球

... 咳咳咳 很差意思，跑题了

下面 真的开始了 :

1. transition 和 animation

让咱们回忆下是怎么用使用动画的：

（1）transition

.foo { width: 100px; trantions:  1s; }

.foo:hover { width: 120px;}
复制代码

设置元素 两个不一样的状态 和 过渡的时间。

当咱们触发变化，浏览器看到样式变化以后，为咱们建立动画

（2）animation

@keyframes cardaniIn {
   0%,
   39%,
   100% {
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0.47, 1);
    animation-timing-function: cubic-bezier(1, 0, 0.47, 1);
   }
   
   0% {
    -webkit-transform: rotateY(0deg) scale(0.8) translate3d(0, 0, 0);
    transform: rotateY(0deg) scale(0.8) translate3d(0, 0, 0);
  }
  
  39% {
    -webkit-transform: rotateY(0deg) scale(0.8) translate3d(0, -50px, 0);
    transform: rotateY(0deg) scale(0.8) translate3d(0, -50px, 0);
   }
   
   100% {
    -webkit-transform: rotateY(180deg) scale(1) translate3d(0, 0, 0);
    transform: rotateY(180deg) scale(1) translate3d(0, 0, 0);
   }
 }
复制代码

animation 容许咱们写多个状态值，为咱们解锁了一次告诉浏览器多个状态变化的能力。

共同点就是，

告诉浏览器咱们想要的样式，并让浏览器看到样式的变化。

浏览器看东西的方式和咱们不太同样，

浏览器一秒有不少帧，每一帧浏览器都会作不少事情，

其中包括计算style的变化，

2个帧之间

由于咱们的修改 致使 元素的样式不同的时候，浏览器就看到了样式的变化，并建立动画。

咱们要达成的第 1 个共识就是：

咱们建立动画，实际是在告诉浏览器 不一样帧之间 元素样式的变化。

2. 动画尽可能只用 transform 和 opacity

浏览器1s有不少帧，每一帧浏览器都会作大量的工做。

其中 layout 从新布局 paint 绘制 是最耗时的两个工做。

transform 和 opacity 的只会触发 composite合成的这一个步骤，

了解这一点 是咱们建立流畅动画的关键

咱们要达成的第 2 个共识就是：

动画尽可能只用 transform 和 opacity

3. display 和 visibility

display:none; 和 visibility: hidden;都会让元素不可见，

（1）display:none; 不可见，不占据空间，更完全，会把元素从render tree移走，发生一次重排。

（2）visibility: hidden;让元素视觉上不可见，而且不可点击交互。可是仍然占据空间，能够得到位置等相关信息，切换visibility不会发生重排。

因此在特定的状况下，好比咱们将要写的动画中(下面会说，须要元素不可见，可是须要位置信息)，能够用visibility: hidden;来隐藏元素。

咱们要达成的第 3 个共识就是：

能够考虑用visibility控制元素的显隐

6. 996 的压力会让人数学和记忆能力变差

FLIP

让咱们开始吧

咱们把动画分红2个部分，第一个部分，总体的位置和大小变化

还记得咱们的第 1 条共识吗，

咱们建立动画，实际是在告诉浏览器 不一样帧之间 元素样式的变化。

如今同样，这个动画包括宽高和位置变化，咱们须要告诉浏览器2个帧的 width offsetTop offsetLeft

FISRT

获取第一帧的样式

var fisrtDom = params.fisrtDom;
var fisrtReact = fisrtDom.getBoundingClientRect();
console.log( fisrtReact )
复制代码

LAST

获取最后一帧的样式

var lastDom = params.lastDom;
var lastReact = lastDom.getBoundingClientRect();
console.log( lastReact );
复制代码

Invert

如今让咱们计算两个状态的差值，并把差值应用在要动画的元素上。

还记得咱们的第 2 和 第 3 条共识吗，

动画用 transform ，元素的显隐用visibility

因此这里咱们用的是 transform 和 元素的显隐用visibility。

play

最后，让它动起来吧。

当咱们 取消 transform 的值的时候，元素的transform将会变回 默认的 translate3d(0,0,0) scalce(1),

浏览器看到样式的变化 和 transtion 就会为咱们建立动画了。

实际上，这是一种叫作 FLIP 的技术。

first (第一帧) L (最后一帧) I (倒转) P (播放)

专门用于建立这种动画

第二部分动画比较简单，留给你们自由发挥。

web Animations Api

有一个叫作 web Animations Api 的api, 对咱们建立动画有很大的帮助，

让咱们能用编程的方式建立动画。

像咱们的例子中，能够这样用

web Animations Api 最棒的地方在于， 能把动画实例保存起来，

咱们在作卡片收起动画的时候，不用再次计算。

直接 animateInstance.reverse() 就能够反转播放动画。

web Animations Api 不是本文的重点，能够自行去了解一下 它 和 它的 poyFill 低版本兼容的插件。

---

参考资料

性能优化 developers.google.cn/web/fundame…

CSS动画你应该知道的10件事 www.yuque.com/cssconf/5th…

FLIP相关 www.w3cplus.com/animation/h…

FLIP相关 www.w3cplus.com/javascript/…

---

... ...

动画虽然完成了，可是因为 我的能力 和 项目的进度，

已经不容许我，去解决路由和分享页面的问题了，很遗憾，没上到正式环境

心塞，为了避免拖项目进度，天天起早一个小时写这个东西，仍是流产了。之后闲下来能够会再捡起来

... ...

这不是一篇严谨的教程，更多的是我我的的总结和分享，

文中可能会有错误遗漏的地方，请多多见谅，权当抛砖引玉。

加 coco 的qq群 418766876，一块儿交流鸭...

. . . 苹果的动画好细腻精致 . . .