在本文中，我们先介绍一下战斗阶段，我们将在宠物小精灵攻击或受到打击时在其上添加一些基本动画。
当宠物小精灵进入战斗阶段或晕倒并消失时，我们还将添加一个过渡。
最后，我们将添加攻击有效性消息（例如损坏报告；攻击所造成的损害程度，或显示其何时超级有效）。
对于动画，我们将使用Velocity.js，Vue具有标准的过渡实现。
转场
过渡是一种动画类型，已应用于通过v-if或v-show条件出现（消失）的元素。
为了定义过渡，我们必须使用组件包装要应用过渡的元素。 在此组件上，我们可以定义将要使用的过渡的名称。 接下来，我们还需要创建一些CSS类，这些类实际上定义了过渡的动画，这些类名将以过渡的名称作为前缀。
组件还为您提供了使用钩子的选项，通过这种方式，您可以使用javascript动画化元素，而不是使用CSS。
过渡宠物小精灵组件
当宠物小精灵进入屏幕或晕倒时，我们只需在应用淡入淡出效果时让宠物小精灵从顶部进入并从底部离开即可。
我们将这个过渡命名为“ pokemon-image”。
让我们在pokemon.vue中创建一个样式标签，并在其中定义过渡CSS类。
我们定义了4个CSS类来定义过渡，但是，Vue允许您为过渡的每个阶段最多定义6个类。
让我们看一下这些阶段，以便您知道何时将上面定义的CSS类添加到元素中：
- {transition} -enter：输入的开始状态。 在元素插入前添加，在元素插入后一帧删除。
- {transition} -enter-active：Enter的活动状态。 在整个进入阶段应用。 在插入元素之前添加，在过渡/动画完成时将其删除。
- {transition} -enter-to： enter的结束状态。 插入元素后添加了一帧（同时删除{prefix} -enter ），在过渡/动画完成后将其删除。
- {transition} -leave：请假的开始状态。 触发离开过渡时立即添加，在一帧后移除。
- {transition} -leave-active：请假的活动状态。 在整个离开阶段应用。 在触发休假过渡时立即添加，在过渡/动画结束时删除。
- {transition} -leave-to ：请假的结束状态。 触发离开过渡（同时删除{prefix} -leave ）后添加一帧，在过渡/动画结束时被移除。
现在我们已经定义了过渡的动画，让我们将其添加到神奇宝贝的图像周围：
如您所见，我们为过渡组件分配了2个属性。
通过定义外观，我们实际上是在说“也将动画应用于初始渲染”。 名称描述了de CSS类的前缀。
这就是我们开始/模糊动画工作所要做的。
攻击/打击动画
接下来，我们将添加2个新的动画，我们要显示一个口袋妖怪实际上攻击或遭受伤害的动作。
Velocity大大简化了该任务，它是一个动画引擎，具有与jQuery.animate相同的API。
它带有一个UI包，其中捆绑了一些基本效果，但同时您也可以定义自己的顺序效果。
为了简单起见，我们将在此步骤中使用一些预定义的效果，在下一步中，我们将实现自己的自定义动画。
我们可以单独使用Velocity，这很好，因为我们没有安装jQuery或Zepto。
因此，Velocity将自身附加到窗口对象，因此您可以通过Velocity函数触发效果：
速度 （ 元素 ， 预定义效果 ）
让我们继续打开Pokemon.vue并将动画添加到Attack方法中：
this.pokemonImageId是我们的神奇宝贝图像的实际ID（将是玩家神奇宝贝或对手神奇宝贝），我们将执行callout.pulse效果。 这种效果将迅速扩大和缩小宠物小精灵的形象一次。
我们将这行放在第一次在我们的Attack方法中更改BattleText属性的上方 。
接下来，我们将展示防守型神奇宝贝受到的打击：
我们将在定义AttackPower常量之后立即放置这段代码。
这使战斗更加活跃了。
攻击效能
在原始游戏中，当效率乘数不为1时，您会看到一个描述其强度的字符串（免疫，弱，超有效甚至是致命一击）。
功能性
我们可以通过在我们创建的Damage类中触发Attack.effect事件来实现此目的 。
每个口袋妖怪组件都必须侦听事件，以便他们更新战斗文本，因此我们必须在事件之前加上口袋妖怪组件的类型。
为此，我们还需要实现一个非常简单的类似于队列的行为，因为攻击可能非常有效，而且可能会造成严重打击。
让我们开始并打开Pokemon.vue，我们将添加2个新的数据属性，称为AttackEffect ，将其设置为false和BattleEffectQueue。
当有攻击效果时，我们将用字符串填充warEffect属性，动画完成后，我们将其再次设置为false。
让我们在名为showAttackEffect的新方法中实现该方法，将其放置在calculateDamage下。
我们还需要设置一个观察者，我们可以通过定义要观察变化的属性来实现，如果发生变化，我们可以说应该发生什么。
对于我们的队列而言，这是完美的选择，我们将要观看AttackEffect ，如果将它设置为false，并且我们的BattleEffectQueue中有内容 ，我们可以再次更新AttackEffect 。
我们将在我们的Vue实例定义中添加一个watch属性（在计算出的属性之后）以实现此目的。 这将永远是一个对象。
接下来，我们定义一个方法，该方法的名称应与我们正在监视的data属性匹配。 此方法将始终获得2个参数：新设置的值和先前的值。
在本部分中，我们差不多完成了，只剩下2个小窍门了。 侦听{type} .attack.effect事件，并找到一种将该类型传递给损伤类的方法。
一旦组件安装完成，我们应该设置事件监听器，因此让我们向Vue实例定义中添加一个安装的方法：
最后，我们将编辑calculateDamage方法，并传递otherPokemon属性。 这样，我们可以告诉攻击效果（如果有的话），它们必须显示在其他宠物小精灵组件上。
现在该开始触发事件了，让我们打开Damage.js并调整power方法以采用其新参数，并将其传递给将触发攻击效果事件的方法：
接下来，我们将开始在calculateTypeEffect中触发攻击效果。 如果计算出的乘数不为1，我们将在方法末尾触发特定事件：
最后，我们将对关键点击执行相同的操作：
模板
现在，我们已经失去了功能，现在该展示攻击效果了。
我们将通过在组件的神奇宝贝图像上方放置一个新的div来实现此目的。 当有效果时，我们希望它淡入并上升，然后再次消失。
让我们回到Pokemon.vue并添加HTML：
还记得我们用一个false值定义了AttackEffect属性，并且在将其设置为字符串之后将其重置为false吗？
v-if指令对此进行了选择，如果AttackEffect不为false，它将显示div。
接下来，让我们在样式标签中为div添加样式：
转场
现在是时候为我们的攻击效果增加一些天赋了。
我们可以再次定义CSS过渡，或使用Velocity的预定义动画之一，但让我们构建一个自定义过渡。
我什至将更进一步，如果我们展望未来，您可能还希望添加特定于攻击的动画。 我们无法在口袋妖怪组件中开始定义它们，因为它会迅速膨胀。
相反，让我们制作一个动画注册表，在其中我们可以定义每个动画（或者以后甚至将其拆分为多个片段）。
我们将如何处理？ 进行可重用转换的唯一方法是将它们定义为组件。 这些组件将具有过渡组件作为其根元素。
我们将为它们分配内容（您将在组件的打开和关闭标签之间放置的HTML），并在根过渡元素内的组件模板函数中呈现它们。 您将为此使用 元素。
Vue提供了功能组件，这些组件允许在状态不是很重要的情况下进行非常简单的设置。 我们将使用Velocity进行动画处理，因此将使用javascript钩子进行过渡。
让我们将其放入代码中，在src /文件夹中创建一个名为animations.js的新文件。 我们暂时保持简单，文件将导出一个对象。
该对象将具有animations属性，该属性是一个包含我们的动画定义的数组。
我们还将添加一个register方法，该方法会将动画转换为组件。
如您所见，我们在4个属性中定义了过渡模板：
- tag ：您将用于此组件的标签的名称（如果您还想将其放入基于CSS的动画中，也将用于命名过渡的名称）。
- onAppear ：首次呈现html内容时是否还会发生过渡。
- css ：是否应该加载具有相同名称的CSS动画？
- 事件 ：这些是您希望在元素出现/消失时应用在元素上的实际动画挂钩。
register方法将Vue作为参数，遍历定义的动画并将它们注册为组件。
让我们打开main.js并实现它：
剩下要做的就是再次打开Pokemon.vue，然后将用于渲染AttackEffect的div包装到我们的自定义组件中。
到此结束本文，我向您展示了如何实现CSS转换，基于javascript挂钩的转换以及如何构建可重用的转换。
您可以在github上找到代码（本文的代码在第5章分支中）
happyDemon /通过口袋妖怪学习
learning-vue-through-pokemon –此存储库包含我的教程系列“通过pokemon学习Vue.js”的代码github.com
下次见
