每天一点VUE（DAY 8-VUE2篇）

这一节是关于Vue实现动画的

在我们纯js做动画时，在我们写好了动画后，需要用js判断不同的情况，然后追加不同的类名，从而实现一些动画效果，而在Vue中给我们提供了一个标签animation，用它包裹住的元素在加载的不同时候会给他添加特定的类名。

目录

1、动画效果

2、过度效果

3、有多个元素动画一样

---

1、动画效果

        这种我们需要自己写动画，然后给元素进入中和离开中绑定动画；当有多个元素时，需要写name，然后不同时期的标签要以name-.....来写，如果只有一个，就写v-....即可

    <!-- 动画效果 appear为true是一上来就做动画 -->
    <transition name="pk" appear>
      <span v-show="show">I AM SPAN1</span>
    </transition>
    <style>
 /* 动画效果 */
    .pk-enter-active {
    animation: potkiss 1s linear;
    }
    .pk-leave-active {
    animation: potkiss 1s linear reverse;
    }
    @keyframes potkiss {
    from {
        transform: translateX(-1000px);
    }
    to {
        transform: translateX(0px);
    }
    }
    </style>

2、过度效果

        这种情况下我们可以把@keyframes里面的东西放在元素进来的时候和进来结束还有出去开始和出去结束；我们需要把添加transition在元素上。

    <!-- 过度效果 appear为true是一上来就做动画-->
    <transition name="kp" appear>
      <span v-show="show">I AM SPAN2</span>
    </transition>
    <style>
    /* 过度效果 */
    .content span:nth-child(2) {
    background: rgb(12, 102, 180);
    transition: 1s linear;
    }
    .kp-enter{
    transform: translateX(1000px);
    }
    .kp-enter-to{
    transform: translateX(0px);
    }
    .kp-leave {
    transform: translateX(0px);
    }
    .kp-leave-to{
    transform: translateX(1000px);
    }
    </style>

3、有多个元素动画一样

        这时我们需要把他们包在animition-group标签里面；并给每一个元素加上key；并且我们可以合并简写动画。

<!-- 多个动画一样，注意要加key appear为true是一上来就做动画-->
    <transition-group name="group" appear>
      <div v-show="show" class="group" key="1">I AM SPAN3</div>
      <div v-show="!show" class="group" key="2">I AM SPAN4</div>
    </transition-group>
    <style>
/* 多组效果 */
    .group {
    background: rgb(26, 180, 31);
    transition: 1s linear;
    }
    .group-enter,
    .group-leave-to {
    transform: translateY(1000px);
    }
    .group-leave,
    .group-enter-to {
    transform: translateX(0px);
    }
    </style>

4、使用动画库（animate.css）

        首先我们需要下载animate

npm i animate.css

        然后就可以使用了，通过类名直接添加，不用写css；注意，需要提前引入，因为是css所以直接引入，然后给transition或者transition-group的name添加上animate__animated animate__bounce这个类名，然后在给不同的节点加入不同的动画即可

<!-- 第三方库animate的动画 -->
    <transition-group 
        appear
        name="animate__animated animate__bounce" 
        enter-active-class="animate__shakeY"
        leave-active-class="animate__backOutDown"
    >
      <div v-show="show" style="background:#000;color:#fff;" key="1">I AM SPAN3</div>
    </transition-group>

    <script>
    import 'animate.css'
    </script>

最后附上完整代码

<template>
  <div class="content">
    <!-- 动画效果 appear为true是一上来就做动画 -->
    <transition name="pk" appear>
      <span v-show="show">I AM SPAN1</span>
    </transition>
    <!-- 过度效果 appear为true是一上来就做动画-->
    <transition name="kp" appear>
      <span v-show="show">I AM SPAN2</span>
    </transition>
    <!-- 多个动画一样，注意要加key appear为true是一上来就做动画-->
    <transition-group name="group" appear>
      <div v-show="show" class="group" key="1">I AM SPAN3</div>
      <div v-show="!show" class="group" key="2">I AM SPAN4</div>
    </transition-group>
    <!-- 第三方库animate的动画 -->
    <transition-group 
        appear
        name="animate__animated animate__bounce" 
        enter-active-class="animate__shakeY"
        leave-active-class="animate__backOutDown"
    >
      <div v-show="show" style="background:#000;color:#fff;" key="1">I AM SPAN3</div>
    </transition-group>
    <button @click="show = !show">switch</button>
  </div>
</template>
<script>
import 'animate.css'
export default {
  name: "SchoolPage",
  data() {
    return {
      show: true,
    };
  },
};
</script>
<style scoped>
    * {
    box-sizing: border-box;
    }
    span {
    display: block;
    margin: 10px 0;
    border-bottom: 1px solid;
    padding: 10px;
    color: aqua;
    }
    .content {
    border: 1px solid #000;
    }
    .content span:nth-child(1) {
    background: #000;
    }
    /* 动画效果 */
    .pk-enter-active {
    animation: potkiss 1s linear;
    }
    .pk-leave-active {
    animation: potkiss 1s linear reverse;
    }
    @keyframes potkiss {
    from {
        transform: translateX(-1000px);
    }
    to {
        transform: translateX(0px);
    }
    }
    /* 过度效果 */
    .content span:nth-child(2) {
    background: rgb(12, 102, 180);
    transition: 1s linear;
    }
    .kp-enter{
    transform: translateX(1000px);
    }
    .kp-enter-to{
    transform: translateX(0px);
    }
    .kp-leave {
    transform: translateX(0px);
    }
    .kp-leave-to{
    transform: translateX(1000px);
    }
    /* 多组效果 */
    .group {
    background: rgb(26, 180, 31);
    transition: 1s linear;
    }
    .group-enter,
    .group-leave-to {
    transform: translateY(1000px);
    }
    .group-leave,
    .group-enter-to {
    transform: translateX(0px);
    }
</style>