过渡的动画遮罩层

LinMeng 等级 385 0 0
标签:
<template>
  <div class="modal-open">
    <!-- 动画遮罩层 -->
    <div class="plan-cover cover_company_166" :class="animateFlagTopDown == true ? ['zIndex'] : ''">
      <div class="plan-cover-top" :class="animateFlagTopDown == true ? ['coverFadeOutUp'] : ''">
        <img class="plan-cover-logo" src="@/assets/images/planBook/company.png" alt="" />
        <div class="plan-cover-slogan">
          <img src="@/assets/images/planBook/slogan_taikang.png" alt="" />
        </div>
      </div>
      <div class="plan-cover-center">
        <div :class="animateFlag == true ? 'colorNone' : ''" class="line"></div>
        <div class="btn" :class="animateFlag == true ? ['animated', 'coverZoomOut'] : ''" @click="openDetail">亲启</div>
      </div>
      <div class="plan-cover-bottom" :class="animateFlagTopDown == true ? ['coverFadeOutDown'] : ''">
        <span class="customer-info"
          >敬呈
          <span v-show="!showNameflag">亲爱的</span>
          <span v-show="showNameflag">{{ insuredName || "" }}</span>
          客户</span
        >
        <div class="customer-count">{{ count }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "BenefitTransform",
  data() {
    return {
      animateFlag: false,
      animateFlagTopDown: false, //  上下动画待“亲启”结束(0.5s)后开启
      showNameflag: false, //  是否展示客户名称
      count: 5,
      animatebBegin: null,
      insuredName: "",
    };
  },
  created() {
    // 进入页面两秒钟后获得客户姓名
    // && 5s定时器结束后进入详情页面
    this.animatebBegin = setInterval(() => {
      // console.log(this.count);
      this.count--;
      if (this.count == 3) {
        this.showNameflag = true;
        this.insuredName = utils.getStore("insuredName");
      }
      if (this.count == 0) {
        this.animateFlag = true;
        setTimeout(() => {
          this.animateFlagTopDown = true;
          clearInterval(this.animatebBegin);
        }, 500);
        setTimeout(() => {
          this.$emit("isAnimateEnd", true);
        }, 800);
      }
    }, 1000);
    //
  },

  methods: {
    // 点击亲启触发动画
    openDetail() {
      this.animateFlag = true;
      clearInterval(this.animatebBegin);
      setTimeout(() => {
        this.animateFlagTopDown = true;
      }, 500);
      setTimeout(() => {
        this.$emit("isAnimateEnd", true);
      }, 800);
    },
  },
  // 页面离开后销毁定时器
  destroyed() {
    clearInterval(this.animatebBegin);
  },
};
</script>

<style lang="less" scoped>
.zIndex {
  z-index: -9999;
}
.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;
}
.plan-cover {
  height: 100%;
  z-index: 9999;
}

.plan-cover-top {
  height: 55%;
  padding-top: 15%;
  background-color: #c7000b;
}

.plan-cover-top .plan-cover-logo {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
}

.plan-cover-top .plan-cover-slogan {
  -webkit-box-flex: 1;
  margin: 4% auto 0;
  width: 153px;
  img {
    width: 100%;
  }
}

.plan-cover-bottom {
  display: block;
  -webkit-box-flex: 1;
  width: 100%;
  height: 40%;
  background-color: #c7000b;
}

.plan-cover-bottom .customer-info {
  position: absolute;
  left: 50%;
  top: 70%;
  vertical-align: middle;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  font-size: 18px;
}

.plan-cover-bottom .customer-count {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 13%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.plan-cover-center .line {
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 55%;
  -webkit-transform: translateY(-50%);
}
.plan-cover-center .colorNone {
  background: transparent;
}

.plan-cover-center .btn {
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 50%;
  color: #c7000b;
  position: absolute;
  text-align: center;
  line-height: 88px;
  font-size: 18px;
  font-weight: 700;
  left: 50%;
  top: 55%;
  margin-left: -44px;
  margin-top: -44px;
}
.coverZoomOut {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-name: coverZoomOut;
  -webkit-animation-fill-mode: forwards;
}

.coverFadeOutDown,
.coverFadeOutUp {
  -webkit-animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
}

.coverFadeOutUp {
  -webkit-animation-name: coverFadeOutUp;
}

.coverFadeOutDown {
  -webkit-animation-name: coverFadeOutDown;
}

@-webkit-keyframes coverZoomOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(4, 4, 4);
    transform: scale3d(4, 4, 4);
  }
}

@-webkit-keyframes coverFadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes coverFadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.coverFadeOutDown,
.coverFadeOutUp {
  -webkit-animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
}

.coverFadeOutUp {
  -webkit-animation-name: coverFadeOutUp;
}

.coverFadeOutDown {
  -webkit-animation-name: coverFadeOutDown;
}
</style>
收藏
评论区

相关推荐

ArrayList底层
一、ArrayList集合底层数据结构1.ArrayList集合介绍List集合的可调整大小数组实现。2.数组结构介绍 增删快:每次增加删除元素,都需要更改数组长度、拷贝以及移除元素位置。 查询快:由于数组在内存中是一块连续空间,因此可以根据地址索引的方式快速获
CSS常用浮出层的写法
浮出层是web页面中经常用到的功能,带有小小尖角的浮出层则更为生动,所以今天带给大家的是有角的浮出层,一起看看吧! ![](http://static.oschina.net/uploads/img/201308/02140120_gpm9.png "poptip") 是的,我们即将实现的就是以上功能,是不是很生动? 贴上HTML: -------
java中dao层和service层的区别是什么
dao层中已经有操作数据库的方法了,为什么还要service层去封装?有什么好处? [tanghui12321](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fzhidao.baidu.com%2Fusercenter%3Fuid%3Dec5c4069236f25705e798820) 
03 Django的路由层
简单的路由配置:通过正则分组获取url中的动态参数 ------------------------- from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003/$', vie
IO 的底层实现问题
最近在看 JAVA NIO 的相关知识,了解一下IO的底层实现原理。 IO涉及到的底层的概念大致如下: 1) 缓冲区操作。2) 内核空间与用户空间。3) 虚拟内存。4) 分页技术。 一,虚拟存储器 虚拟存储器是硬件异常(缺页异常)、硬件地址翻译、主存、磁盘文件和内核软件的完美交互,它为每个进程提供了一个大的、一致的和私有的地址空间。 虚拟存储器的
Action层, Service层 和 Dao层的功能区分
1. **Action/Service/DAO简介:** Action是管理业务(Service)调度和管理跳转的。  Service是管理具体的功能的。  Action只负责管理,而Service负责实施。  DAO只完成增删改查,虽然可以1-n,n-n,1-1关联,模糊、动态、子查询都可以。但是无论多么复杂的查询,dao
CocosCreator之分层管理的ListView
前言 == 进入公众号回复listview即可获得demo的git地址。 1. 之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动,没有实现横向滑动。并且建议官方可以把功能做全然后放入组件库中供开发者使用。 2. 然后有个牛逼大神说这个ListView不ok。要我对自己
Django模型层
在Django引用其他数据库,比如mysql,需要如下配置: # settings.py import pymysql pymysql.install_as_MySQLdb() DATABASES = { 'default': { 'ENGINE': 'django
HashMap 的底层实现原理
HashMap 是一个用于存储Key-Value 键值对的集合,每一个键值对也叫做Entry。这些个Entry 分散存储在一个数组当中,这个数组就是HashMap 的主干。 HashMap 数组每一个元素的初始值都是Null。  ![](https://oscimg.oschina.net/oscnet/8495d30fe00a2865dd74088d2
Native层HIDL服务的获取原理
摘要:本节主要来讲解Android10.0 Native层HIDL服务的获取原理 > 阅读本文大约需要花费23分钟。 > > **文章首发微信公众号:IngresGe** > > **专注于Android系统级源码分析,Android的平台设计,欢迎关注我,谢谢!** **\[Android取经之路\] 的源码都基于Android-Q(10.0) 进
Nginx(二):Nginx的四层(L4)和七层(L7)负载均衡
**OSI七层模型 和** **TCP/IP四层模型** ![](https://oscimg.oschina.net/oscnet/f1cd538b7aeb8e870ea1f7c033dc8d634ba.png) **四层负载均衡**( **L4** **Load Balancing** ) 四层负载均衡,主要通过报文中的**目标地址和端口**,再
OpenLayers图层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>
Spring的业务层和Web层
任务调度 ====   quartz框架 ----------   quartz框架实现了Spring的任务调度,用户可以随意的定义触发器调度时间表,并将触发器和任务进行映射。quartz通过调度器、触发器和任务实现任务调度。   Job:主要用来设计任务实现的逻辑,并且只有一个方法execute。   JobDetail:主要用来通过newInst
swal() 弹出层的用法
swal()方法是一个提示框; swal({ title: "", text: "请扫描用户手机上的付款码", type: "input", showCancelButton: true, closeOnConfirm: false, canc
过渡的动画遮罩层
亲启 敬呈 亲爱的 insuredName || "" 客户 count export default name: "BenefitTransform", data() return animate