39 lines
690 B
Vue
39 lines
690 B
Vue
<template>
|
|
<div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrap{
|
|
position: fixed;
|
|
left: 50%;
|
|
top:50%;
|
|
background: rgba(0, 0, 0, 0.623);
|
|
padding: 30px;
|
|
border-radius: 5px;
|
|
transform: translate(-50%,-50%);
|
|
color:#fff;
|
|
}
|
|
.fadein {
|
|
animation: animate_in 0.25s;
|
|
}
|
|
.fadeout {
|
|
animation: animate_out 0.25s;
|
|
opacity: 0;
|
|
}
|
|
@keyframes animate_in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes animate_out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |