弹窗动画

vue transition 结合 animate.css 实现动画过渡

背景模糊

css模糊效果 毛玻璃效果

代码

/**
* @Author: 858834013@qq.com
* @Name: popWin
* @Date: 2022-05-06
* @Desc: 弹窗
*/
<template>
  <div>
    <div @click="getShow">
      <slot></slot>
    </div>
    <transition name="component" appear>
      <div class="popWin" v-if="show">
        <div class="but1" @click="clickOne()">{{ title }}</div>
        <div class="but2" @click="clickTwo()">{{ titleTwo }}</div>
      </div>
    </transition>
  </div>
</template>

<script>

export default {
  name: "popWin",
  props: {
    title: {
      type: String,
      default() {
        return ''
      }
    },
    titleTwo: {
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      show: false
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getShow() {
      this.show = true
    },
    getHide() {
      this.show = false
    },
    clickOne() {
      this.$emit('clickOne', 0)
      this.getHide()
    },
    clickTwo() {
      this.$emit('clickTwo', 0)
      this.getHide()
    }
  }
}
</script>

<style lang="scss" scoped>
.popWin {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .but1 {
    width: 300px;
    height: 100px;
    background: linear-gradient(180deg, #5EBBFF 0%, #4BAEFF 100%);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-left: 100px;
    margin-right: 100px;
    align-content: flex-start;
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    border-radius: 50px;
    cursor: pointer;
  }

  .but2 {
    width: 300px;
    height: 100px;
    background: #B2B2B2;
    border-radius: 50px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 100px;
    margin-right: 100px;
    flex-direction: row;
    align-content: flex-start;
    cursor: pointer;
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.component-enter-active,
.component-leave-active {
  transition: all 1s;
}

.component-enter {
  transform: translateY(100%);
  opacity: 0;
}

.component-leave-to {
  transform: translateY(200%);
  opacity: 0;
}
</style>

使用

      <popWin title="返回首页" title-two="退出系统" @clickTwo="closeWin" @clickOne="goback">
        <span class="span">关闭</span>
      </popWin>