From aa06290aefab8e01681671707244db02a260f846 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Mon, 2 Apr 2018 18:33:57 +0900
Subject: [PATCH] =?UTF-8?q?udpate:=20=E3=82=AB=E3=83=BC=E3=83=86=E3=83=B3?=
 =?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/keyframes/pc/_load-view.scss | 35 ++++++++++++++++
 src/scss/modules/pc/_load-view.scss   | 60 +++++++++++++++++++++++++++
 2 files changed, 95 insertions(+)

diff --git a/src/scss/keyframes/pc/_load-view.scss b/src/scss/keyframes/pc/_load-view.scss
index 3b07100..0545471 100644
--- a/src/scss/keyframes/pc/_load-view.scss
+++ b/src/scss/keyframes/pc/_load-view.scss
@@ -77,3 +77,38 @@
   from { 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%); }
+}
diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss
index 441d61f..a398d89 100644
--- a/src/scss/modules/pc/_load-view.scss
+++ b/src/scss/modules/pc/_load-view.scss
@@ -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
    ********************************************************************************************/
@@ -434,6 +478,22 @@
   }
 
   .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 ***/
     .load-view__body__info {
       .allow:nth-child(1) {