better doleance transition #2233

src/assets/main.scss

@@ -662,25 +662,80 @@ body{
     }
 
     nav.doleance-switch{
-      div{
-        $height:60vh;
       position: fixed;
+      pointer-events: none;
+      overflow: hidden;
+      top: 0; left: 0;
+      width: calc(100vw - $cartouch_width - 0.5rem);
+      height: 100vh;
+      div{
+        pointer-events: all;
+        $height:60vh;
+        position: absolute;
         top: calc((100vh - $height) * 0.51);
         cursor: pointer;
-        width:150px;
+        width:605px;
         height: $height;
         background-image: url(../assets/cercle_politique.png);
         background-size: cover;
-        &:hover{
+        
+        visibility: hidden;
+
+        
+        &.visible{
+          visibility: visible;
+        }
+        
+        &:hover:not(.animeleft):not(.animeright){
           background-image: url(../assets/cercle_politique-hover.png);
         }
         &.prev{
-          left: 0rem;
+          left: calc(-605px + 150px);
           background-position: right;
         }
         &.next{
-          right:calc($cartouch_width + 0.5rem);
+          right:calc(-605px + 150px);
         }
+
+        transition: opacity 1s ease-in-out;
+        transform: translateX(0);
+
+        &.animeleft,
+        &.animeright{
+          // animation-duration: 1.5s;
+          transition: opacity 1s ease-in-out,transform 1s ease-in-out;
+          opacity: 0;
+        }
+        &.animeleft{
+          // animation-name: animeleft;
+          transform: translateX(calc(-100vw / 2));
+        }
+        &.animeright{
+          // animation-name: animeright;
+          transform: translateX(calc(100vw / 2));
+        }
+
+        // @keyframes animeleft {
+        //   from {
+        //     transform: translateX(0);
+        //     opacity: 1;
+        //   }
+        //   to {
+        //     transform: translateX(calc(-100vw / 2));
+        //     opacity: 0;
+        //   }
+        // }
+        // @keyframes animeright {
+        //   from {
+        //     transform: translateX(0);
+        //     opacity: 1;
+        //   }
+        //   to {
+        //     transform: translateX(calc(100vw / 2));
+        //     opacity: 0;
+        //   }
+        // }
+
       }
     }
 

src/components/ConcernementMapItem.vue

@@ -548,6 +548,7 @@ export default {
     */
     setPaperContents(){
       // trigered once opening tween is complete
+      // trigered once mapmode changed
       this.clearPaperContents();
       switch(this.map_mode){
         case 'terraindevie':
@@ -1617,7 +1618,6 @@ export default {
     initDoleanceTransition(from, to){
       if (!this.doleance_transition) {
         this.doleance_transition = true
-        let u = 0;
         // console.log(`initDoleanceTransition from:${from}, to:${to}`);
         let from_pg = this.paper_main_object.children.doleances.children[`doleance_${from}`]
         from_pg.visible = true;
@@ -1625,15 +1625,24 @@ export default {
         let to_pg = this.paper_main_object.children.doleances.children[`doleance_${to}`]
         to_pg.visible = true;
         to_pg.opacity = 0;
+        let bg = this.paper_main_object.children.doleance_bg;
         
+        // fade out the current visible cercle politique then fade in the new one
+        let u = 0;
+        let f = 6;
+        let p = 10;
         let doDoleanceTransition = function(){
           // console.log(`doDoleanceTransition u:${u} from:${from_pg}, to:${to_pg}`);
           u++
-          if (u <= 20) {
+          if (u <= f*2+p) {
-            if (u<=10) {
+            if (u<=f) {
-              from_pg.opacity = 1-u/10
+              // fade out
+              from_pg.opacity = bg.opacity = 1-u/f
+            } else if(u>f && u<p+f) {
+              // pause
             }else{
-              to_pg.opacity = (u-10)/10
+              // fade in
+              to_pg.opacity = bg.opacity = (u-p-f)/f
             }
             window.requestAnimationFrame(doDoleanceTransition);
           }else{

src/components/contents/Doleancer.vue

@@ -46,20 +46,41 @@ export default {
       }
     });
   },
+  mounted() {
+    if (this.doleance_index > 0) 
+      this.$refs.prevDoleanceBTN.classList.add('visible');
+
+    if (this.doleance_index < this.concernement.doleances.length-1)
+      this.$refs.nextDoleanceBTN.classList.add('visible'); 
+  },
   methods: {
     ...mapActions(ConcernementsStore,['setOpenedDoleance']),
     nextDoleance(){
       this.doleance_index ++;
-      this.openDoleance()
+      this.$refs.prevDoleanceBTN.classList.add('animeleft');
+      this.$refs.nextDoleanceBTN.classList.add('animeleft');
+      this.openDoleance();
     },
     prevDoleance(){
       this.doleance_index --;
+      this.$refs.prevDoleanceBTN.classList.add('animeright');
+      this.$refs.nextDoleanceBTN.classList.add('animeright');
       this.openDoleance()
     },
     openDoleance(){
       console.log('openDoleance');
       this.doleance = this.concernement.doleances[this.doleance_index];
       this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
+      setTimeout((function(that){
+        return function(){
+          console.log('doleance anime end', that);
+          that.$refs.prevDoleanceBTN.classList.remove('animeleft', 'animeright');
+          that.$refs.prevDoleanceBTN.classList.toggle('visible', that.doleance_index > 0);
+
+          that.$refs.nextDoleanceBTN.classList.remove('animeleft', 'animeright');
+          that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1); 
+        };
+      }(this)), 1000)
     }
   },
   components: {
@@ -293,29 +314,13 @@ export default {
   
   <nav v-if="map_mode === 'doleancer'" class="doleance-switch">
     <div 
-      v-if="doleance_index > 0"
       @click="prevDoleance"
-      class="prev">
+      class="prev"
-       <!-- <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+      ref="prevDoleanceBTN" />
-          <mask id="arrowMaskprev">
-            <rect x="0" y="0" width="24" height="24" fill="white"/>
-            <path :d="arrowleft_path" fill="black"/>
-          </mask>
-          <circle cx="12" cy="12" r="12" mask="url(#arrowMaskprev)" fill="white" />
-        </svg>   -->
-    </div>
     <div
-      v-if="doleance_index < concernement.doleances.length-1"
       @click="nextDoleance"
-      class="next">
+      class="next"
-        <!-- <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+      ref="nextDoleanceBTN" />
-          <mask id="arrowMasknext">
-            <rect x="0" y="0" width="24" height="24" fill="white"/>
-            <path :d="arrowright_path" fill="black"/>
-          </mask>
-          <circle cx="12" cy="12" r="12" mask="url(#arrowMasknext)" fill="white" />
-        </svg>   -->
-    </div>
   </nav>
   
 </template>