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

update: callingの終了要素にスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-16 23:26:41 +09:00
parent f0f49202b7
commit 0bd3dbac4c
2 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/scss/keyframes/pc/_calling.scss
View File

@ -51,3 +51,8 @@
85% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes calling__end {
from { transform: translateY(-100%); }
to { transform: translateY(0%); }
}

33
src/scss/modules/pc/_calling.scss
View File

@ -333,6 +333,25 @@
}
}
/*** end ***/
.calling__end {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 6;
div {
width: 100%; height: 10%;
overflow: hidden;
&::after {
content: ""; display: block;
width: 100%; height: 100%;
background-color: $theme-mint;
transform: translateY(-100%);
}
}
}
.calling[data-state="start"] {
/*** bg ***/
.calling__bg {
@ -512,5 +531,19 @@
}
}
}
/*** end ***/
.calling__end {
div:nth-child(1):after { animation: slide-bottom 0.3s ease 12.6s forwards; }
div:nth-child(2):after { animation: slide-bottom 0.3s ease 12.65s forwards; }
div:nth-child(3):after { animation: slide-bottom 0.3s ease 12.75s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.3s ease 12.8s forwards; }
div:nth-child(5):after { animation: slide-bottom 0.3s ease 12.85s forwards; }
div:nth-child(6):after { animation: slide-bottom 0.3s ease 12.9s forwards; }
div:nth-child(7):after { animation: slide-bottom 0.3s ease 12.95s forwards; }
div:nth-child(8):after { animation: slide-bottom 0.3s ease 13.0s forwards; }
div:nth-child(9):after { animation: slide-bottom 0.3s ease 13.05s forwards; }
div:nth-child(10):after { animation: calling__end 0.3s ease 13.1s forwards; }
}
}
}