better doleance transition #2233

src/assets/main.scss

@@ -703,7 +703,9 @@ body{
         &.animeleft,
         &.animeright{
           // animation-duration: 1.5s;
-          transition: opacity 1s ease-in-out,transform 1s ease-in-out;
+          $duration: 0.9s;
+          $delay: 0.4s;
+          transition: opacity $duration ease-in-out $delay,transform $duration ease-in-out $delay;
           opacity: 0;
         }
         &.animeleft{

src/components/ConcernementMapItem.vue

@@ -1627,33 +1627,37 @@ export default {
         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 <= 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{
-              // fade in
-              to_pg.opacity = bg.opacity = (u-p-f)/f
-            }
-            window.requestAnimationFrame(doDoleanceTransition);
-          }else{
+        // // fade out the current visible cercle politique then fade in the new one
+        new Tween.Tween({o: 1})
+          .to({
+            o: 0
+          }, 600)
+          .onUpdate((obj) => {
+            console.log(`tween update. o=${obj.o}`);
+            from_pg.opacity = bg.opacity = obj.o;
+          })
+          .onComplete((obj) => {
+            new Tween.Tween({o: 0})
+              .to({
+                o: 1
+              }, 900)
+              .onUpdate((objb) => {
+                to_pg.opacity = bg.opacity = objb.o;
+              })
+              .onComplete((obj) => {
                 from_pg.visible = false;
                 from_pg.opacity = 1;
                 to_pg.opacity = 1;
                 this.doleance_transition = false
-          }
-        }.bind(this)
+              })
+              .delay(500)
+              .easing(Tween.Easing.Quadratic.InOut)
+              .start();
+          })
+          .easing(Tween.Easing.Quadratic.Out)
+          .start();
+        
         
-        doDoleanceTransition()
       }
     },
     onIsHover(){
@@ -2122,9 +2126,10 @@ export default {
     onBeforeEngineUpdate (event) {
 
       // update the opening/closing tweening
-      if (this.tween) {
-        this.tween.update();
-      }
+      // if (this.tween) {
+      //   this.tween.update();
+      // }
+      Tween.update();
 
       if (this.opened_concernement) {
         // console.log("try to push aside", this.opened_concernement.opened_mapitem_id, this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]);

src/components/contents/Doleancer.vue

@@ -53,6 +53,10 @@ export default {
     if (this.doleance_index < this.concernement.doleances.length-1)
       this.$refs.nextDoleanceBTN.classList.add('visible'); 
   },
+  unmounted() {
+    this.setOpenedDoleance(parseInt(this.cid), this.concernement.doleances[0].id);
+
+  },
   methods: {
     ...mapActions(ConcernementsStore,['setOpenedDoleance']),
     nextDoleance(){
@@ -80,7 +84,7 @@ export default {
           that.$refs.nextDoleanceBTN.classList.remove('animeleft', 'animeright');
           that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1); 
         };
-      }(this)), 1000)
+      }(this)), 2000)
     }
   },
   components: {