diff --git a/src/assets/main.scss b/src/assets/main.scss index 86f8fca..b3e0cb3 100644 --- a/src/assets/main.scss +++ b/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{ diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 42082d9..25e43b6 100644 --- a/src/components/ConcernementMapItem.vue +++ b/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 { + 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 + }) + .delay(500) + .easing(Tween.Easing.Quadratic.InOut) + .start(); + }) + .easing(Tween.Easing.Quadratic.Out) + .start(); + + } }, 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]); diff --git a/src/components/contents/Doleancer.vue b/src/components/contents/Doleancer.vue index 73aaf8f..1617634 100644 --- a/src/components/contents/Doleancer.vue +++ b/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: {