仿van-popup实现一个从底部弹出的Popup-Js中文网

Popup弹出层在H5中算是一个比较常见的组件，弹出层在出现和消失时有一个展开收起的过渡动画，以下是Vant UI库的Popup组件从底部弹出的效果：

Popup

有点类似于手风琴的展开收起，如果自己手动通过css去实现，还是挺麻烦的。但在Vue中为我们提供了一个内置的transition组件，用它来实现上述的效果非常简单，几行代码就可以搞定！不过在次之前，你需要了解一下Vue 过渡 & 动画

van-popup提供了从多个方向弹出的选项，还提供了多种展示和交互效果。我们先实现一个简单的从底部弹出的popup，其他情况可以举一反三。

 html
<template>
  <div class="popup">
    <!-- 蒙层 -->
    <transition name="fade">
      <div class="popup-overlay" @click="clickMask" v-show="visible"></div>
    </transition>
    <!-- 弹出层 -->
    <transition name="slide">
      <div class="popup-content" v-show="visible">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    visible: Boolean,
  },
  methods: {
    clickMask() {
      this.$emit('update:visible', false);
    },
  },
};
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-enter,
.slide-leave-active {
  transform: translate3d(0, 100%, 0);
}

.popup {
  .popup-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    widows: 100vw;
    background: rgba($color: #000000, $alpha: 0.5);
  }
  .popup-content {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    transition: transform .3s
  }
}
</style>

要想实现展开收起的过渡效果，最核心的就是以下这段代码：

 css
.slide-enter,
.slide-leave-active {
  transform: translate3d(0, 100%, 0);
}

理解这段代码之前，先来温习一下Vue的过渡的类名

从上面的代码可以看出，弹出层定义了一个名为slide的transition，然后在元素被插入之前（slide-enter）和整个离开过渡的阶段（slide-leave-active）新增了一个css属性：transform: translate3d(0, 100%, 0)，该css表示元素向下偏移自身的100%。我们来捋一捋过渡整个过程。

元素被插入前（slide-enter），向下偏移100%，此时Popup完全被隐藏到屏幕底部。
元素插入后，slide-enter被立即移除，transform: translate3d(0, 100%, 0)变成transform: none(元素默认的css属性)，Popup就会根据以下css属性恢复到正常的位置，但因为transition: transform .3s属性，因此从底部展开有0.3秒的过渡，这也就是我们所看到的展开效果。

 scss
.popup-content {
   width: 100%;
   position: fixed;
   bottom: 0;
   left: 0;
   background: #fff;
   transition: transform .3s
}

当visible变为false时，元素收起，效果就像是Popup向下偏移。整个消失的过程被添加上slide-leave-active类名，transform: none变成transform: translate3d(0, 100%, 0)，也就可以看到Popup逐步向下的过渡动画。

接下来简单展示一下封装好的Popup的使用。

 vue
<template>
  <div>
    <el-button @click="visible = !visible">切换Popup</el-button>
    <popup :visible.sync="visible">
      <div style="height: 200px">
        <div>从底部弹出的Popup</div>
      </div>
    </popup>
  </div>
</template>

<script>
import popup from '@/components/popup.vue';

export default {
  components: {
    popup,
  },
  data() {
    return {
      visible: false,
    };
  },
};
</script>

demo