介绍
vue-pose 是一个基于 React Pose 库的 Vue 实现。通过使用 vue-pose，你可以很方便地在 Vue 应用中实现动画效果。
vue-pose 支持非常灵活的动画定义，可以定义进场、出场动画，以及将状态与动画耦合起来。
安装
在 Vue 项目中使用 npm 安装 vue-pose：
npm install --save vue-pose
如果你的项目是用 yarn 管理的，使用如下命令进行安装：
yarn add vue-pose
使用
全局注册
在任意组件中都能使用 pose 标签，你需要将 vue-pose 在你的应用程序中注册为一个插件：
import Vue from 'vue'; import VuePose from 'vue-pose'; Vue.use(VuePose);
组件级引入
你也可以像普通的组件那样局部导入 vue-pose：
import { PoseGroup } from 'vue-pose';
export default {
components: {
PoseGroup
}
};Vue 官方推荐使用全局注册的方式，但对于 Nuxt.js 等 SSR 项目来说，组件级引入是更好的选择。
使用 pose 标签
vue-pose 中最重要的标签就是 pose。在应用内声明一个 pose，需要使用 <pose> 标签并指定 name 属性：
<template>
<div>
<pose name="visible">
<!-- animation here -->
</pose>
</div>
</template>你可以使用一个可选的 initialPose 属性指定组件第一次渲染的姿势，例如 { rotate: 0 }，就表示初始状态下这个 DOM 节点的旋转角度为 0。
<template>
<div>
<pose name="visible" :initialPose="{ rotate: 0 }">
<!-- animation here -->
</pose>
</div>
</template>定义动画
使用 pose 标签包裹元素后，就可以开始配置动画了。
比如下面这段代码就定义了一个简单的点击当前元素切换其位置和透明度的动画：
-- -------------------- ---- -------
----------
-----
----- -------------- --------------- -- -- -- -- -------- - ---
---- -----------
--------- ---------- ------------------ --------- -------- ------- --
------------------------
----- ---
------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ----------
-- --
-- --
-------- -
--
--
-------- -
-------- -
------------- - ------------- --- --------- - -------- - ----------
-
--
--------- -
------ -
------ -
-------- -
-- -------
-- -------
-------- -------------
----------- -
----- ---------
---------- ----
-------- ---
-
--
------- -
-- ------ - ----
-- -------
-------- --
-
-
-
--
------ -
--------------- -
-------------------------------------
-
-
--
---------进场和出场动画
插入和移除元素时，需要设置进场和出场动画。
vue-pose 提供了两种方法：
- 使用 keyframes
- 使用 props
使用 keyframes
我们可以使用关键帧定义和类似于 CSS 动画一样的方式执行它们。
例如在下面的示例中，我们定义了两个不同的关键帧：enter 和 leave，并在在定义了 poseParent 的 PoseGroup 中：
-- -------------------- ---- -------
----------
------------
---- ----------- -- ------ ----------------
-----
----------
--------------------
--------------------
-
-- --------- --
-------
------
-------------
-----------
--------
------ ------- -
------ -
------ -
------ -
- ---- -- ----- ----- -- --
- ---- -- ----- ----- -- --
- ---- -- ----- ----- -- --
--
------ -
--
--
--------- -
------ -
------ -
-------- -
-------- --
---------- -----------
--
------- -
-------- --
---------- -----------
--
--------------- -
-------- --
---------- -----------
----------- -
----- ---------
---------- ----
-------- ---
--
--
--------------- -
-------- --
---------- -------------
----------- -
----- ---------
---------- ----
-------- ---
--
--
--
--
--
--
---------使用 props
Props allow you to define enter and exit poses that you want to use within a single pose.
例如：以下代码定义了一个进/出场动画：
-- -------------------- ---- -------
----------
----
---
----------- -- ------
--------------
--------- ----- ------- ------ ----------- ------ ---------- --
--- --------- -------
-----
-----------
--------
------ ------- -
------ -
------ -
------ -
---- -- ----- ----- ----
---- -- ----- ----- ----
---- -- ----- ----- ----
--
----- -
------ ----
-------- --
----------- -
--------- ----
--
--
--------- -
------ --
-------- --
--
--------- -
------ ----
-------- --
-
--
--
--
---------参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b366fd