transitionを使って多少アニメーションさせた

diff --git a/src/components/selectPanel.vue b/src/components/selectPanel.vue
index eb24f8e..21516d7 100644 (file)
--- a/src/components/selectPanel.vue
+++ b/src/components/selectPanel.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="border-white">
-    <div v-if="isShow" class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50">
-      <!-- modal -->
-      <div class="bg-white rounded shadow-lg w-6/12">
-        <!-- modal header -->
-        <div class="border-b px-4 py-2 flex justify-between items-center">
-          <h2 class="font-semibold text-lg">{{title}}</h2>
-          <button class="text-black" @click="show">&cross;</button>
-        </div>
-        <!-- modal body -->
-        <div class="p-1">
-          <ul class="select_box overflow-auto max-h-96">
-              <li class="hover:bg-indigo-200" v-for="head in lists" :key="head.id" @click="onSelected(head)">{{head.name}}</li>
-          </ul>
-        </div>
-        <div class="flex justify-end items-center w-100 border-t p-3">
-          <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
+  <transition name="selectPanel">
+    <div class="border-white" v-if="isShow">
+      <div class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50 modal-full">
+        <!-- modal -->
+        <div class="bg-white rounded shadow-lg w-6/12 modal-panel">
+          <!-- modal header -->
+          <div class="border-b px-4 py-2 flex justify-between items-center">
+            <h2 class="font-semibold text-lg">{{title}}</h2>
+            <button class="text-black" @click="show">&cross;</button>
+          </div>
+          <!-- modal body -->
+          <div class="p-1">
+            <ul class="select_box overflow-auto max-h-96">
+                <li class="hover:bg-indigo-200" v-for="head in lists" :key="head.id" @click="onSelected(head)">{{head.name}}</li>
+            </ul>
+          </div>
+          <div class="flex justify-end items-center w-100 border-t p-3">
+            <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -66,9 +68,35 @@ export default {
 .select_box {
     border: 1px solid #c5c5c5;
 }
+
+.modal-full {
+}
+
+.modal-panel {
+}
+
 .select_box li {
     cursor: default;
     box-sizing: border-box;
     padding: 2px 10px;
 }
+
+.selectPanel-enter-active,
+.selectPanel-leave-active {
+  transition: opacity 0.5s;
+}
+.selectPanel-enter,
+.selectPanel-leave-to {
+  opacity: 0;
+}
+.selectPanel-enter-active > .modal-full > .modal-panel,
+.selectPanel-leave-active > .modal-full > .modal-panel {
+  transition: all 0.5s;
+}
+.selectPanel-enter > .modal-full > .modal-panel {
+  transform: translateX(-100%);
+}
+.selectPanel-leave-to > .modal-full > .modal-panel {
+  transform: translateX(100%);
+}
 </style>