better doleance transition #2233

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':
@@ -1616,8 +1617,7 @@ export default {
     },
     initDoleanceTransition(from, to){
       if (!this.doleance_transition) {
-        this.doleance_transition = true 
-        let u = 0;
+        this.doleance_transition = true
         // 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<=10) {
-              from_pg.opacity = 1-u/10
+          if (u <= f*2+p) {
+            if (u<=f) {
+              // 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">
-       <!-- <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
-          <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>
+      class="prev"
+      ref="prevDoleanceBTN" />
     <div
-      v-if="doleance_index < concernement.doleances.length-1"
       @click="nextDoleance"
-      class="next">
-        <!-- <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
-          <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>
+      class="next"
+      ref="nextDoleanceBTN" />
   </nav>
   
 </template>