MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

udpate: カーテンにスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-02 18:33:57 +09:00
parent 3a146bcd20
commit aa06290aef
2 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/scss/keyframes/pc/_load-view.scss
View File

@ -77,3 +77,38 @@
from { transform: rotate(-5deg); } from { transform: rotate(-5deg); }
to { transform: rotate(5deg); } to { transform: rotate(5deg); }
} }
@keyframes load-view__show-curtain-1 {
from { transform: translateY(-100%); }
to { transform: translateY(0%); }
}
@keyframes load-view__show-curtain-2 {
from { transform: translateY(100%); }
to { transform: translateY(0%); }
}
@keyframes load-view__show-curtain-inner-1 {
0% { transform: translateY(0); }
30% { transform: translateY(calc(100% - 15px)); }
80% { transform: translateY(calc(100% - 60px)); }
100% { transform: translateY(100%); }
}
@keyframes load-view__show-curtain-inner-2 {
0% { transform: translateY(0); }
30% { transform: translateY(calc(-100% + 15px)); }
80% { transform: translateY(calc(-100% + 60px)); }
100% { transform: translateY(-100%); }
}
@keyframes load-view__show-message {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0px); opacity: 1; }
}
@keyframes load-view__close-1 {
from { transform: translateY(-100%); }
to { transform: translateY(0%); }
}
@keyframes load-view__close-2 {
from { transform: translateY(100%); }
to { transform: translateY(0%); }
}

60
src/scss/modules/pc/_load-view.scss
View File

@ -403,6 +403,50 @@
} }
} }
.load-view__body__close {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
.curtain {
width: 100%; height: 50%;
background-color: #fff;
overflow: hidden;
&::after {
content: ""; display: block;
width: 100%; height: 100%;
background-color: $theme-pink;
}
}
.curtain:nth-child(1) { transform: translateY(-100%); }
.curtain:nth-child(2) { transform: translateY(100%); }
.message {
position: absolute;
top: calc(50% - 20px); left: 0;
width: 100%; height: 40px;
font-size: 30px;
color: #fff;
text-align: right;
line-height: 40px;
box-sizing: border-box;
padding: 0 20px;
opacity: 0;
}
&::before,
&::after {
content: ""; display: block;
position: absolute; left: 0;
width: 100%; height: 50%;
background-color: $theme-light-pink;
z-index: 1;
}
&::before { top: 0; transform: translateY(-100%); }
&::after { bottom: 0; transform: translateY(100%); }
}
/******************************************************************************************** /********************************************************************************************
* animation * animation
********************************************************************************************/ ********************************************************************************************/
@ -434,6 +478,22 @@
} }
.load-view[data-state="start"] { .load-view[data-state="start"] {
/*** close ***/
.load-view__body__close {
.curtain:nth-child(1) {
animation: load-view__show-curtain-1 0.5s ease 6s forwards;
&::after { animation: load-view__show-curtain-inner-1 1.5s ease 6.2s forwards; }
}
.curtain:nth-child(2) {
animation: load-view__show-curtain-2 0.5s ease 6s forwards;
&::after { animation: load-view__show-curtain-inner-2 1.5s ease 6.2s forwards; }
}
.message { animation: load-view__show-message 0.5s ease 6.7s forwards; }
&::before { animation: load-view__close-1 0.5s ease 7.2s forwards; }
&::after { animation: load-view__close-2 0.5s ease 7.2s forwards; }
}
/*** info ***/ /*** info ***/
.load-view__body__info { .load-view__body__info {
.allow:nth-child(1) { .allow:nth-child(1) {