VUEd窗动画-从下到上d出，从中间展开等

前言：

VUEd窗动画建议不要参考官网封装好的的transition，本来很简单的一个需要，越看越晕。

先上源码，看不懂再往下看：

开发流程：

1.先写好一个不带动画的d窗组件，share_cover为遮罩DIV，share_content为内容DIV

2.（核心）

d窗动画，我们要给内容DIV的CSS加个animation属性。这里我们给animation设置了三个值：动画CSS名，时间，动画播放次数

3.动画CSS名，按照组件功能命名就行，动画效果在@keyframes里面配置

keyframes后面跟动画名，0%表示动画开始的DIV样式，会覆盖掉animation所在DIV的属性。

可以把0%当作vi-if=false时来理解，动画刚开始时候DIV的样式。

比如我们这里0%的时候bottom设置为-5.5rem,那么share_content里面的bottom会开始会被替换成-5.5rem.

5.同理，如果我们想把动画由从上到下换成从中间一个点展开，也是改keyframes

更多动画效果可以参考 这个 ，直接预览看里面的样式文件，拉倒keyframes那一块即可

1.transition-group 需要对子元素绑定key属性。key通常为不重复的字符串或数字

2.transiton以及transition-group组件需要通过name属性指定过渡动画

如果不太了解vue组件切换过渡动画，建议看下文档。或者可以直接用 vue2-animate

以下是一个示例：

<transition-group name="fadeLeft" tag="ul">

<li v-for="item in items" :key="item.id">

{{ item }}

</li>

</transition-group>

---