Vue动画 基础篇

vue 动画

1.普通版

transition 是vue的内置组件
使用的transition包裹的结构，在标签显示出来的时候，style中写上如下样式：

v-enter : 要进入页面的第一帧

v-enter-to:出去第一帧，要进入所花的时间

v-enter-active: 全部要进入所花的时间

v-leave : 要离开页面的第一帧

v-leave-to:进去第一帧，要离开所花的时间

v-leave-active: 全部要离开所花的时间

样式内可添加transform:scale:缩放比例；… 等样式；

案例

    <input type="checkbox" v-model="isShow" />
    <transition >
      <div class="box box1" v-if="isShow">啦啦啦</div>
    </transition>
    <transition >
      <div class="box box2" v-if="isShow">啦啦啦</div>
    </transition>
    //
    <script
    export default {
    data() {
    return {
      isShow: true,
    };
    },
    };
    </script>
    //css样式1
    .v-enter{
    transform: scale(0);
    }
    .v-enter-to{
      transform: scale(1);
    }
    .v-enter-active{
      transition: 2s;
    }
    .v-leave{
      opacity: 1;
    }
    .v-leave-to{
      opacity: 0;
    }
    .v-leave-active{
      transition: 2s;
    }
    <!--样式2同上效果-->
    @keyframes scaleIn {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .v-enter-active {
      animation: scaleIn 2s;
    }
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    .v-leave-active{
      animation: fadeOut 2s;
    }

2.添加name

由于可能会存在多个盒子会有不同的动画效果，所以可以通过给每个transition添加 name = " "
那么style中写上如下样式格式：

[name]-enter

[name]-enter-to

[name]-enter-active

[name]-leave

[name]-leave-to

[name]-leave-active

代码如下：

    <transition name="typeA">
      <div class="box box1" v-if="isShow">耶耶耶</div>
    </transition>
    <transition name="typeB">
      <div class="box box2" v-if="isShow">耶耶</div>
    </transition>
    <!--css样式-->
    .box {
      width: 200px;
      height: 100px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 100px;
      margin: 10px;
    }
    .box1 {
      background: saddlebrown;
    }
    .box2 {
      background: salmon;
    }
    .typeA-enter {
      transform: scale(0);
    }
    .typeA-enter-to {
      transform: scale(1);
    }
    .typeA-enter-active {
      transition: 2s;
    }
    .typeA-leave {
      opacity: 1;
    }
    .typeA-leave-to {
      opacity: 0;
    }
    .typeA-leave-active {
      transition: 2s;
    }
    .typeB-enter {
      transform: translateX(-300px);
    }
    .typeB-enter-to {
      transform: translateX(0);
    }
    .typeB-enter-active {
      transition: 2s;
    }
    .typeB-leave {
      transform: translateY(0);
      opacity: 1;
    }
    .typeB-leave-to {
      transform: translateY(300px);
      opacity: 0;
    }
    .typeB-leave-active {
      transition: 2s;
    }

3.添加animate.css 插件

去animate css 官网复制 class 名
添加到：

enter-class

enter-to-class

enter-active-class

leave-class

leave-to-class

leave-active-class

中；

    <transition
      enter-active-class="animate__backInDown animate__animated"
      leave-active-class="animate__rotateOut animate__animated">
      <div class="box">千锋教育</div>
      <!--引入 插件-->
      <script>
        import "animate.css";
        export default {
          data() {
            return {
              isShow: true,
            };
          },
        };
        </script>
        <!--样式-->
        .box {
          width: 200px;
          height: 100px;
          color: #fff;
          font-size: 20px;
          text-align: center;
          line-height: 100px;
          margin: 10px;
          background: seagreen;
        }

从animete css官网上粘下来的代码
如果直接在enter-active-class等内添加，不能出来效果，还需要再加上animate__animated ，才能出效果；另一种方法是在盒子的类名里再添加 animation-duration: 1s；的样式;

4.如果有多个标签执行同一组动画，需要使用transition-group将这个标签包裹起来

案例：

    <input type="checkbox" v-model="isShow" />
    <transition-group
      leave-active-class="animate__hinge animate__animated"
      enter-active-class="animate__flip animate__animated"
    >
      <div class="box" :key="1" v-show="isShow"></div>
      <div class="box" :key="2" v-show="isShow"></div>
      <div class="box" :key="3" v-show="isShow"></div>
    </transition-group>
    <!---->
    <script>
    import "animate.css";
    export default {
      data() {
        return {
        
          isShow: true,
        };
      },
    };
    </script>
    <!--样式-->
    .box {
      width: 100px;
      height: 100px;
      margin: 10px;
      background: darkorange;
    }

切记用transition-group 一定得再内部标签内加 key="" 值

5.初始化的时候也需要执行动画, 先把transition标签的属性appear添加上：

appear相关的class：

transition没有设置名字：

v-appear

v-appear-to

v-appear-active

transition设置了名字：

[name]-appear

[name]-appear-to

[name]-appear-active

transition自定义class：

appear-class=‘xxx’

appear-to-class=‘xxx’

appear-active-class=‘xxx’

<!-- 一个标签 -->

    <transition
      appear
      leave-active-class="animate__hinge animate__animated"
      enter-active-class="animate__flip animate__animated"
      appear-active-class="animate__bounceIn animate__animated"
    >
      <Box v-if="isShow"/>
    </transition>

    <hr />

    <!-- 多个标签 -->
    <transition-group
      leave-active-class="animate__hinge animate__animated"
      enter-active-class="animate__flip animate__animated"
    >
      <div class="box" :key="1" v-show="isShow"></div>
      <div class="box" :key="2" v-show="isShow"></div>
      <div class="box" :key="3" v-show="isShow"></div>
    </transition-group>

6.mode:控制动画执行的顺序；

可取的值有：
in-out  先进入在离开
out-in  先离开再进入