Vue.js通过《口袋妖怪＃5过渡与动画》进行了解释
在本文中，我们先介绍一下战斗阶段，我们将在宠物小精灵攻击或受到打击时在其上添加一些基本动画。 当宠物小精灵进入战斗阶段或晕倒并消失时，我们还将添加一个过渡。 最后，我们将添加攻击有效性消息（例如损坏报告；攻击所造成的损害程度，或显示其何时超级有效）。 对于动画，我们将使用Velocity.js，Vue具有标准的过渡实现。 转场 过渡是一种动画类型，已应用于通过v-if或v-show条件出现（消失）的元素。 为了定义过渡，我们必须使用组件包装要应用过渡的元素。 在此组件上，我们可以定义将要使用的过渡的名称。 接下来，我们还需要创建一些CSS类，这些类实际上定义了过渡的动画，这些类名将以过渡的名称作为前缀。 组件还为您提供了使用钩子的选项，通过这种方式，您可以使用javascript动画化元素，而不是使用CSS。 过渡宠物小精灵组件 当宠物小精灵进入屏幕或晕倒时，我们只需在应用淡入淡出效果时让宠物小精灵从顶部进入并从底部离开即可。 我们将这个过渡命名为“ pokemon-image”。 让我们在pokemon.vue中创建一个样式标签，并在其中定义过渡CSS类。 我们定义了4个CSS类来定义过渡，但是，Vue允许您为过渡的每个阶段最多定义6个类。 让我们看一下这些阶段，以便您知道何时将上面定义的CSS类添加到元素中： {transition}…
