码迷,mamicode.com
首页 > 移动开发 > 详细

移动端实现弹出框渐显和渐隐效果

时间:2018-12-03 19:57:12      阅读:370      评论:0      收藏:0      [点我收藏+]

标签:效果   初始化   bind   abs   就是   ***   key   bsp   div   

在移动端想实现一个弹出框渐渐出现和消失的效果。由于用的是vue.js,所以写法有些独特,用
变量控制是否显示类名。
但是核心解决方法就是CSS3的animation属性应用
还有CSS中的z-index应用,必须初始化定义让弹出框在最底部。
还有就是opacity属性的应用,这样才有渐健弹出和渐渐消失的效果。
给弹出框3个css类,本身一个,弹出时一个和消失的时候一个。
JS方面很简单,就是2个css类之间的切换,注意本身初始化的类要一直保留。

 

html:
<div class="index-set" v-bind:class="{‘show-index‘:indexSetShow ,‘fade-index‘:indexSetFade}">
</div>

 

css:
.index-set{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:90vw;
height:auto;
background:#fff;
border:2px solid #dfdfdf;
z-index:-100;
}

/****渐渐隐藏出现样式****/
.show-index{
animation:show 0.36s ease 0s;
animation-fill-mode:both;
}

.fade-index{
animation:fade 0.36s ease 0s;
animation-fill-mode:both;
}

@keyframes show{

  from{
    opacity:0;
  }
  50%{
    opacity:0.5;
  }
  to{
    opacity:1;
    z-index:888;
  }
}

 

@keyframes fade{
  from{
    opacity:1;
    z-index:888;
  }
  50%{
    opacity:0.5;
  }
  to{
    opacity:0;
    z-index:-100;
  }
}

 

移动端实现弹出框渐显和渐隐效果

标签:效果   初始化   bind   abs   就是   ***   key   bsp   div   

原文地址:https://www.cnblogs.com/ranyonsue/p/10059840.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!