From 7cff622e141a3dfe28cd9dbedc67e1017e0298e4 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Tue, 28 Jul 2020 13:10:20 +0200
Subject: [PATCH] added some transitions

---
 assets/css/app.scss               |  2 +-
 assets/css/base/_layout.scss      |  3 +++
 assets/css/base/_transitions.scss | 35 +++++++++++++++++++++++++++++++
 src/App.vue                       |  4 +++-
 src/components/nav/HeaderMenu.vue |  5 ++++-
 src/pages/Edition.vue             | 11 ++++++----
 6 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index c5abd93..7d19bcf 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -2,9 +2,9 @@
 @import './base/variables';
 @import './base/colors';
 @import './base/grid-flex';
+@import './base/transitions';
 @import './base/layout';
 @import './base/fonts';
-@import './base/transitions';
 
 /* The emerging W3C standard
 that is currently Firefox-only */
diff --git a/assets/css/base/_layout.scss b/assets/css/base/_layout.scss
index 8b5e4ac..11c4340 100644
--- a/assets/css/base/_layout.scss
+++ b/assets/css/base/_layout.scss
@@ -42,6 +42,9 @@ body{
       height:100%; max-height:100%;
       overflow-y: hidden;
       overflow-x: hidden;
+      >*{
+        @include fade-transition;
+      }
       @media only screen and (max-width: $small-bp) {
         overflow-y: auto;
         padding:0 $side-padding/2 0 $side-padding/2;
diff --git a/assets/css/base/_transitions.scss b/assets/css/base/_transitions.scss
index 309aa5a..3491000 100644
--- a/assets/css/base/_transitions.scss
+++ b/assets/css/base/_transitions.scss
@@ -45,3 +45,38 @@
     transition: all 200ms ease-in-out;
   }
 }
+
+// .fade-enter,
+// .fade-leave-to{
+//   opacity: 0;
+// }
+// .fade-enter-to,
+// .fade-leave{
+//   opacity:1;
+// }
+.fade-enter-active{
+  transition: all 300ms ease-in-out;
+}
+.fade-leave-active{
+  transition: all 200ms ease-in-out;
+}
+
+// .fade-enter-active,
+// .fade-leave-active {
+//   transition-duration: 0.3s;
+//   transition-property: opacity;
+//   transition-timing-function: ease;
+// }
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0
+}
+
+// .edition-texts-enter-active, .edition-texts-leave-active {
+//   transition: all 1s;
+// }
+// .edition-texts-enter, .edition-texts-leave-to /* .list-leave-active below version 2.1.8 */ {
+//   max-height: 0;
+//   // transform: translateY(30px);
+// }
diff --git a/src/App.vue b/src/App.vue
index 34c6d15..ee83352 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,9 @@
     </header>
     <section role="main-content">
       <div class="wrapper">
-        <RouterView />
+        <transition name="fade" mode="out-in">
+          <RouterView />
+        </transition>
       </div>
     </section>
     <footer role="tools">
diff --git a/src/components/nav/HeaderMenu.vue b/src/components/nav/HeaderMenu.vue
index b1817c0..60ef3d6 100644
--- a/src/components/nav/HeaderMenu.vue
+++ b/src/components/nav/HeaderMenu.vue
@@ -2,7 +2,10 @@
   <nav id="header-menu">
     <!-- <span v-if="!corpusLoaded" class="loading">Loading ...</span> -->
     <ul>
-      <li v-if="corpusLoaded"><router-link to="/corpus">Corpus</router-link></li>
+      <li >
+        <span v-if="!corpusLoaded" class="loading">Loading ...</span>
+        <router-link v-else to="/corpus">Corpus</router-link>
+      </li>
       <li :class="{ opened: indexOpened }">
         <span
           @click.prevent="onClickIndex"
diff --git a/src/pages/Edition.vue b/src/pages/Edition.vue
index 7c0d05c..0bf9b6b 100644
--- a/src/pages/Edition.vue
+++ b/src/pages/Edition.vue
@@ -5,10 +5,11 @@
     :navopened="navopened"
     @onCenterScrolled="onCenterScrolled"
   >
-    <template v-if="!content" #header>
+    <!-- <transition name="fade" mode="out-in"> -->
+    <template v-if="!corpusLoaded" #header>
       <span class="loading">Loading ...</span>
     </template>
-    <template #header>
+    <template v-else #header>
       <h1>
         <router-link :to="{ name:'edition', params: { id: editionid }}">{{ title }}</router-link>
       </h1>
@@ -23,7 +24,7 @@
         @click.prevent="onClickTooltip"
         @keyup.enter="onClickTooltip"
       >
-        <span v-if="indexitem == 'loading'">Loading ...</span>
+        <span v-if="indexitem == 'loading'" class="loading">Loading ...</span>
         <template v-if="indexitem !== 'loading'">
           <h1 v-html="indexitem.title" />
           <p v-if="indexitem.birthDate" class="birthdeath">
@@ -40,7 +41,7 @@
 
       </aside>
     </template>
-
+    <!-- </transition> -->
     <!-- default slot -->
     <div id="text">
       <template v-if="texts.length">
@@ -51,6 +52,7 @@
           :distance="inifinite_load_distance"
           @infinite="prevText"
         />
+        <!-- <transition-group name="edition-texts" tag="div"> -->
         <EdText
           v-for="text in texts"
           :ref="text.content.uuid"
@@ -61,6 +63,7 @@
           @onHoverLink="onHoverLink"
           @onLeaveLink="onLeaveLink"
         />
+        <!-- </transition-group> -->
         <infinite-loading
           v-if="flattoc"
           :identifier="inifinite_load_id"