From 3d670063a9cbf0ac3a28649b4a601fa5bd189198 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Tue, 3 Apr 2018 14:33:25 +0900
Subject: [PATCH] =?UTF-8?q?add:=20gab-animation=E3=81=AE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E9=81=A9?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/modules/pc/_gab-animation.scss | 39 +++++++++++++++++++++++++
 src/scss/modules/pc/_load-view.scss     |  1 +
 2 files changed, 40 insertions(+)
 create mode 100644 src/scss/modules/pc/_gab-animation.scss

diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss
new file mode 100644
index 0000000..27b9d09
--- /dev/null
+++ b/src/scss/modules/pc/_gab-animation.scss
@@ -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; }
+    }
+  }
+}
diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss
index dde16df..42704cd 100644
--- a/src/scss/modules/pc/_load-view.scss
+++ b/src/scss/modules/pc/_load-view.scss
@@ -6,6 +6,7 @@
     min-width: $min-width; min-height: $min-height;
     background-color: $theme-pink;
     overflow: hidden;
+    z-index: 1000;
   }
 
   /**