vue中嵌套动画的写法

---

title: vue中嵌套动画的写法
date: 2023-02-02 14:11:34.515
updated: 2023-02-02 14:38:08.134
url: https://hexo.start237.top/archives/vue中嵌套动画的写法
categories:

• IT技术
  tags:
• vue

---

首先要搞清楚这6个class的作用

在进入/离开动画时，会有6个class进行切换。
v-enter 这个地方定义最终的状态
v-enter-active 在这个地方定义过渡动画，开始时间、效果
v-enter-to

v-leave 这个地方定义最终的状态
v-leave-active 在这个地方定义过渡动画，开始时间、效果
v-liave-to

思路

加上 <transition name="el-fade-in-linear"> 标签后，比如说属性 name是 el-fade-in-linear，那么子元素的类名是 child。那么CSS样式就这样写即可。最后在 transition的属性上加上时间 duration的值设置的要大于css中设置的动画时长，这样才可以看到效果。

/deep/ .el-fade-in-linear-enter-active .child {
    transition: all 0.4s linear;
    transform: scaleY(1);
    transform-origin: top;
  }

  /deep/ .el-fade-in-linear-leave-active .child {
    transition: all 0.4s linear;
    transform: scaleY(0);
    transform-origin: top;
  }
  /deep/ .el-fade-in-linear-enter .child {
    transform: scaleY(0);
  }

模板的代码

<transition
      name="el-fade-in-linear"
      :duration="{ enter: 1000, leave: 1000 }"
    >
      <div class="plane" @click="close" v-if="shadeShow">
        <div class="child">
          <div class="plane-wrap">
            <div
              class="plane-item"
              @click.stop="handlePlanItemClick(item)"
              v-for="(item, index) in pcades"
              :key="index"
            >
              {{ item.selected ? "√" : "" }}{{ item.pcade }}
            </div>
          </div>
          <div class="plane-actions" @click.stop="">
            <div @click.stop="reset">重置</div>
            <div @click.stop="confirm">确定</div>
          </div>
        </div>
      </div>
    </transition>

这样就做出来了一个，背景遮罩从透明到半透明显示，并且，菜单从上到下展开的一个动画效果。

总结

通过这个问题更深入的了解了vue的动画原理。