移動端實現彈出框漸顯和漸隱效果
在移動端想實現一個彈出框漸漸出現和消失的效果。由於用的是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;
}
}