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

add: gab-animationの背景にスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-03 14:33:25 +09:00
parent fd315be228
commit 3d670063a9
2 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/scss/modules/pc/_gab-animation.scss Normal file
View File

@ -0,0 +1,39 @@
@include pc-layout {
.gab-animation {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
min-width: $min-width; min-height: $min-height;
background-color: $theme-light-pink;
z-index: 1001;
}
/*** bg ***/
.gab-animation__bg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
div {
width: 100%; height:12.5%;
background-color: $theme-bg;
transform: translateX(-100%);
}
}
/*************************************************************************************************
* animation
*************************************************************************************************/
.gab-animation[data-state="start"] {
.gab-animation__bg {
div:nth-child(1) { animation: slide-right 0.4s ease 0s forwards; }
div:nth-child(2) { animation: slide-right 0.4s ease 0.1s forwards; }
div:nth-child(3) { animation: slide-right 0.4s ease 0.2s forwards; }
div:nth-child(4) { animation: slide-right 0.4s ease 0.3s forwards; }
div:nth-child(5) { animation: slide-right 0.4s ease 0.4s forwards; }
div:nth-child(6) { animation: slide-right 0.4s ease 0.5s forwards; }
div:nth-child(7) { animation: slide-right 0.4s ease 0.6s forwards; }
div:nth-child(8) { animation: slide-right 0.4s ease 0.7s forwards; }
}
}
}

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

@ -6,6 +6,7 @@
min-width: $min-width; min-height: $min-height; min-width: $min-width; min-height: $min-height;
background-color: $theme-pink; background-color: $theme-pink;
overflow: hidden; overflow: hidden;
z-index: 1000;
} }
/** /**