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{