vue动画，你全都会用了吗

我最近学习了如何在vue中打造动画效果，我将在这里分享我是如何一步步学习并实践Vue中实现动画的多种方法。我将从原生的CSS Transition开始，逐步过渡到Vue的Transition组件，再到CSS Animation的使用，最后引入强大的Animate.css库，全面掌握Vue动画的制作技巧。

一、起步：原生CSS Transition的简单应用

在我初识Vue动画时，首先接触到的是原生的CSS Transition。这种方法简单直接，只需在目标元素上添加或移除特定的CSS类，就能触发过渡效果。以下是一个基本的例子：

/* CSS */
.card__content .emoji {
  transition: 0.5s;
}
.hidden {
  opacity: 0;
  transform: translateX(30px);
}

<!-- HTML -->
<div :class="['emoji',{hidden:!isActive}]">🌳</div>

我在这里定义了一个动态显示和动画切换效果的图标元素。在CSS部分，.card__content .emoji类设置了一个0.5秒的过渡效果，使得任何应用于此类的样式变化都能平滑过渡。.hidden类则定义了一种隐藏状态，通过将元素的不透明度设为0并沿X轴偏移30像素，使元素从视觉上消失。

在HTML部分，使用Vue.js的动态类绑定v-bind:class或简写的:class，将hidden类动态地绑定到包含树图标 (🌳) 的<div>元素上。这个类是否应用取决于isActive变量的布尔值：如果isActive为false，则hidden类被添加，使元素隐藏；如果isActive为true，则hidden类不会被添加，元素保持可见。

效果是这样的：

二、进阶：Vue Transition组件的深度使用

随着对Vue的了解加深，我发现了Vue提供的Transition组件，它为动画提供了更加强大的功能和更细粒度的控制。Transition组件允许我们定义进入和离开的过渡效果，甚至可以监听过渡事件。

/* 进入时 */
.v-enter-from {
  opacity: 0;
}

.v-enter-active {
  transition: .3s;
}

.v-enter-to {
  opacity: 1;
}
/* 离开时 */
.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: 1s;
}

.v-leave-to {
  opacity: 0;
}

<transition>
    <div v-if="isActive" class="emoji">🌳</div>
</transition>

我使用了.v-enter-from、.v-enter-active和.v-enter-to类来定义元素进入时的动画，使元素从不可见状态渐变为可见，这个过程迅速而平滑，为用户带来了舒适的视觉体验。同样地，.v-leave-from、.v-leave-active和.v-leave-to类则用于控制元素离开时的渐变效果，使其从可见状态渐变为不可见。在HTML部分，我利用了Vue的<transition>标签，结合v-if指令，根据isActive变量的值来动态显示或隐藏一个表情符号（emoji），从而触发动画。

当然，如果需要定制动画效果我们可以在Transition组件上加上name:

        <transition name="slide">
            <div v-if="isActive" class="emoji">🌳</div>
        </transition>

那么css就只需要把v改成自己定义的name属性的值

.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.slide-enter-active {
  transition: .3s;
}
.slide-enter-to {
  opacity: 1;
}

.slide-leave-from {
  opacity: 1;
}
.slide-leave-active {
  transition: .3s;
}
.slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

三、深入：CSS Animation的强大功能

当我开始探索更复杂的动画效果时，CSS Animation进入了我的视线。与Transition相比，Animation可以定义更加丰富和复杂的动画序列，通过关键帧来精确控制动画的每个阶段。

起初，我没用到vue自带的transition组件，直接使用的animation

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
} 

/* css性能优化 GPU加速 动画不要影响周围的文档流 */
 @keyframes pulse {
    from {
        transform: scale3d(1,1,1);
    }
    50% {
        transform: scale3d(1.5,1.5,1.5);
    }
    to {
        transform: scale3d(1,1,1);
    }
}

<div :class="['emoji',{pulse:!isActive}]">🌳</div>

我在这实现了一个循环的脉冲动画效果，该效果被应用在一个表情符号（emoji）上。通过CSS的@keyframes规则，我定义了一个名为pulse的关键帧动画，它会使元素在1秒内从一个初始状态（完全缩放）过渡到放大50%，然后回到初始状态，这个过程会无限次重复。

在HTML部分，我使用了Vue的v-bind:class指令，结合!isActive条件表达式，来控制emoji类是否添加pulse类。当isActive为true时，emoji元素不会应用pulse类，因此不会有动画效果；当isActive为false时，emoji元素会应用pulse类，从而触发动画。

接下来，我学习到了transition组件的使用，我试着直接使用组件改变动画效果

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
} 

/* css性能优化 GPU加速 动画不要影响周围的文档流 */
 @keyframes pulse {
    from {
        transform: scale3d(1,1,1);
    }
    50% {
        transform: scale3d(1.5,1.5,1.5);
    }
    to {
        transform: scale3d(1,1,1);
    }
}

.pulse-enter-active {
  animation: pulse 1s;
}
.pulse-leave-active {
  animation: pulse 1s;
}

        <transition name="pulse">
            <div v-if="isActive" class="emoji">🌳</div>
         </transition>

我在这实现了一个基于Vue的Transition组件的动画效果，该效果通过CSS的@keyframes规则定义了一个名为pulse的动画，它会在1秒内将元素从初始状态（完全缩放）过渡到放大50%，然后回到初始状态，这个过程会无限次重复。

在HTML部分，我使用了Vue的<transition>标签，并为其设置了name="pulse"属性，这个属性与CSS中的pulse-enter-active和pulse-leave-active类相对应。在CSS中，这两个类分别定义了元素进入和离开时的动画效果，即应用了pulse动画。

当isActive变量为true时，<div>元素会被渲染，并应用pulse-enter-active类，从而触发动画效果。当isActive变量为false时，<div>元素会被移除，但由于pulse-leave-active类仍然在CSS中定义，因此当元素离开时，也会应用pulse动画。

通过定义关键帧，我们可以创造出跳跃、弹跳等效果，让页面更加生动。

四、巅峰：引入Animate.css库，轻松实现复杂动画

在学习Vue动画的过程中，我发现了一个神器——Animate.css。这是一个预设了多种动画效果的CSS库，只需引入它，就能轻松实现复杂的动画效果，极大地提高了开发效率。

<transition
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounce"
>
  <div v-if="isActive" class="emoji">🌳</div>
</transition>

通过简单的类名绑定，我们就能使用Animate.css库中预设的动画效果，让页面瞬间生动起来。

总结

通过这一系列的学习和实践，我深刻体会到了Vue在动画制作上的灵活性和强大功能。从原生CSS Transition到Transition组件，再到CSS Animation和Animate.css库，每一步都为我打开了新世界的大门。